element Cascader 级联选择器使用及表单的校验

Cascader 级联选择器使用(数据格式，表单校验) 

 一、 industryList: [ ] , // 数据来源，数据的回显，应该是个数组的形式，在我的项目中，接口回显的数据为，也是一个数组的形式。

二、 v-model绑定的数据格式：

 但是官方给的数据格式是：

因此  通过  :props="industryProps"  ，对数据进行处理，使其变为我们想要的数据。在data中对数据处理为：

官方props的描述为：注意：当使用上面的props定义数据时，需要注意，最里面一层数据要设置为null ,

 

如果数据比较多(也可以使用)

当使用上面那种形式时，会出现：（造成最后一项是暂无数据的结果是：因为数据的最后一层没有定义为null） 使用下面的数据处理一下，便不会造成这样的情况

 

    getIndustry () {
         // 获取技术领域
        tree().then(res => {
          console.log(res,'主要技术领域下拉的接口数据');
          this.industryList = this.setTree(res);// 接口数据经过一个方法处理一下
        });
    },
    setTree(data) { // 数据处理
      let tree = data
      for (let i of tree) {
        if (i.children && i.children.length > 0) { // 如果数据有children，并且有数据，则再次执行一下数据处理
                                                  // 此处的children,是根据接口字段定的，因为此处接口给的是children
                                                  // 所以使用的就是children
          this.setTree(i.children)
        } else {
          delete i.children
        }
      }
      console.log(tree,'处理好的数据');
      return tree
    },

 通过处理后，就完美的实现了，我们要的效果。

 三、 校验

在el-form-item 中通过prop进行校验：校验的规则为： 

此处的触发校验的方式是：blur.

在联级选择器中，触发的方式也可以是change,那么要添加type

cascadeRule:[
  {type:'array', required: true, message: "请选择XXX", trigger: "change"}
],
 添加type:'array' 触发的方式为change