Element Cascader 级联选择器多选默认值和下拉框清空的坑

分手后的思念是犯贱 2023-06-13 08:59 65阅读 0赞

需求：多选、显示最后一级的节点、可搜索、加载时显示默认值。

显示：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODAyNzI2_size_16_color_FFFFFF_t_70

代码

  1. <el-form-item>
  2.                             <el-cascader
  3.                                     :options="dataForType"
  4.                                     placeholder="默认标签"
  5.                                     :props="props"
  6.                                     :show-all-levels="false"//仅显示最后一级
  7.                                     filterable //筛选
  8.                                     node-key="label"
  9.                                     ref="dataRef"
  10.                                     @change="cascaderChange"
  11.                                     v-model="dataRefValue"
  12.                                     clearable//可批量清空
  13.                             >
  14.                             </el-cascader>
  16. data: function () {
  17.      return {
  18.         dataRefValue:[["0110","011001"],["0150"],],//多选格式
  19.         dataForType:[],
  20.         props: {
  21.                     label: 'name',
  22.                     value: 'tagsCode',
  23.                     children: 'children',
  24.                     multiple: true,//多选
  25.                     disabled: 'disabled'
  26.                 },
  27.     }
  28. }
  30.  methods: {
  31.         cascaderChange(){
  32.                 console.log(vm.dataRefValue)
  33.                 console.log(this.$refs.dataRef.getCheckedNodes())
  34.         },
  36.           }

中间遇到的坑，默认值问题:this.$refs.dataRef.setCheckedNodes([data])这个方法是tree的，在cascader里面用不了，所以要给组件绑定v-model,v-model我绑定的dataRefValue，一开始初始值给的dataRefValue:[‘1’,’2’],然后发现页面回显，改为[‘1’,’2’,]，在最后一个值后面加个逗号就可以了。

在说清空取参，一开始用的我绑了一个refs，使用了this.$refs.dataRef.getCheckedNodes()是可以取值的，但是清空时发现在下拉框取消点选，和在选择框点最后叉号取消这两个方法都没问题this.$refs.dataRef.getCheckedNodes()取的值都是正确的，如图：

20191115105116297.png 20191115105154279.png

上面两种是对的，但是在选择框点数据后面的叉号，如图：

20191115105240394.png

会发现this.$refs.dataRef.getCheckedNodes()里面的值显示的点选前的数据，也就是当我选择框数据一个个点完清空以后还会取到最后一个的值。解决方法就是不用this.$refs.dataRef.getCheckedNodes()取值，直接取v-model里面的值。需要注意的v-model里面的值是带上层级的数据所以遍历的时候可以用下面的方法来获取子节点

  1. for (let item of vm.dataRefValue) {
  2.         console.log(item[item.length-1])
  4.     }

发表评论

表情：
评论列表 （有 0 条评论，65人围观）

还没有评论，来说两句吧...

相关阅读