element-plus el-cascader 级联组件清空所选数据方法

话不多说直接上代码

import {ref, Ref, reactive} from 'vue';
const cascaderOrg:Ref = ref(null)  //获取级联组件的ref  ref名称即cascaderOrg
cascaderOrg.value.cascaderPanelRef.clearCheckedNodes(); //清空所选数据
1
2
3

借用官方文档展示该方法

相关细节描述及全部代码有需要可复制

import {ref, Ref, reactive, onMounted, nextTick} from 'vue';
import type { FormInstance,FormRules,CascaderProps } from 'element-plus';
import { ElMessage } from 'element-plus'

const form = reactive({villageName: ''}); //我的form表单数据
const cascaderOrg:Ref = ref(null)  //获取级联组件的ref  ref名称即cascaderOrg

// 级联组件配置props，不需要可删除
const props:CascaderProps = {
  value: 'id',
  label: 'name',
  children: 'children',
  emitPath: false,//在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
  expandTrigger: 'hover' as const
}

// 级联组件选项变化事件，此处根据自己需要进行代码修改，我这边的要求是如果选项的level小于5则不可选，展示提示
const handleOrgChange = (val)=>{
  let nodes = cascaderOrg.value.getCheckedNodes(); 
  if(!!val && !!nodes && nodes.length>0 && nodes[0]?.level < 5){
    ElMessage({
      message: '只能选择村级数据',
      type: 'warning',
    })    
    nextTick(()=>{
      cascaderOrg.value.cascaderPanelRef.clearCheckedNodes();
      form.villageName = '';
    })
    return
  }
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42