Cascader 级联选择组件

乌鱼子

一开始级联组件使用的是ElementUI，但是有一个bug。我自己做的是一个二级级联，在选择了二级之后，点击x删除选择，再打开下拉框，一级和二级都是展开的，翻遍了文档都没有查到解决资料，然后问了我们一个前端同事，他说这是ElementUI组件的问题，建议我使用iview组件，然后我就用了iView的级联组件。

iView的级联组件使用和ElementUI没啥区别，但是我们服务器返回的数据和组件提供的数据键名不一致，这里把ElementUI和iView组件对键名的修改都整理一下。

1-1、ElementUI级联组件对键名的修改：（直接在:props里配置）

<el-cascader 
    v-model="form.woTypeCode" 
    :props="{ value: 'code', label: 'name', children: 'childs' }"  
    //将键名code修改为value name修改为label childs修改为children        
    :options="WorkOrderTreeArr" 
    clearable 
    @focus="getWorkOrderTree">
</el-cascader>

1-2、iView级联组件对键名的修改：（我是在vuex的mutations这里就将服务器返回的数据键名就修改了，后面再mapState拿数据渲染就和之前的流程完全一样了）

const mutations = {
  GETWORKORDERTREE(state, WorkOrderTree) {
    // 参数WorkOrderTree是服务器返回的data数据
    // 1、先将WorkOrderTree数组中的code修改为value 存储到变量WorkOrderLevelTreevalue（到现在这个变量数组里其实只有了value）
    let WorkOrderLevelTreevalue = JSON.parse(JSON.stringify(WorkOrderTree).replace(/code/g, "value"))
    // 2、再将WorkOrderLevelTreevalue数组中的name修改为label 存储到变量WorkOrderLevelTreeLable（到现在这个变量数组里其实就有了value、label）
    let WorkOrderLevelTreeLable = JSON.parse(JSON.stringify(WorkOrderLevelTreevalue).replace(/name/g, "label"))
    // 3、再将WorkOrderLevelTreeLable数组中的childs修改为children 存储到state的WorkOrderLevelTree中（WorkOrderLevelTree中value、label、children都已修改完成了）
    state.WorkOrderLevelTree = JSON.parse(JSON.stringify(WorkOrderLevelTreeLable).replace(/childs/g, "children"))
  },
}

iView这种方法有bug，当修改的键名和键值一样时，全局修改会修改所有相同的值。

但也有优势，服务器返回的数据无论嵌套几级，所有键名都会被修改。

如果大家担心会修改掉键值，那可以去看看这位大佬的笔记：链接

2、以下内容是iView组件的v-model数据的绑定，必须是一个数组

 

woTypeCode、woContentCode这两个是后端同事提供的，分别级联的一级和二级，发请求获取数据时需要的参数。

下面是发请求对参数进行整理。

 

3、Cascader组件的input框右边有一个x，可以清空input框内容，一般在清空之后，需要重新发请求来获取数据，可我翻遍文档也没找到关于这个叉的方法，在这里我对input的数据进行了watch监听，解决了清空内容重新发请求获取数据这个问题。

watch: {
    form: {
      handler: function (newVal) {
        if (newVal.workTypeContent.length == 0) {
          console.log('input框的数据被清空了，要重新发请求获取数据啦')
          this.getTableList()
        }
      },
      deep: true,
    }
  },