elementui el-cascader级联选择器体验问题

最新推荐文章于 2023-12-04 16:39:09 发布

哇咔哇咔

最新推荐文章于 2023-12-04 16:39:09 发布

阅读量866

点赞数

分类专栏： vue element ui技术积累

本文链接：https://blog.csdn.net/klousYG/article/details/111247338

版权

vue element ui技术积累专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.清除上一次展开的记录（第二次点击时会显示上一次展开的数据（未选中数据时））

<el-form-item label="部门" prop="DeptId">
            <el-cascader
              style="width: 100%;"
              ref="myCascader"
              placeholder="请选择部门: 支持输入搜索"
              v-model="form.DeptId"
              :options="data"
              :props="{ checkStrictly: true }"
              @change="changeDept"			//当选中节点变化时触发
              @visible-change="blurDept"   //下拉框出现/隐藏时触发	
              clearable
              filterable
            />


 		 blurDept(e){
	        const _cascader = this.$refs.myCascader
	        if (_cascader) {
	            _cascader.$refs.panel.checkedValue = []
	            _cascader.$refs.panel.activePath = [] 
	            _cascader.$refs.panel.syncActivePath()
	        }
    	},

2.清除选中

<el-cascader
    v-model="value"
    :options="options"
    ref="cascader">
</el-cascader>

// 清空级联选择器选中状态
this.$refs.cascader.$refs.panel.clearCheckedNodes()
// 清除高亮
this.$refs.cascader.$refs.panel.activePath = []