问题现象
在列表的高级搜索form表单中使用el-cascader,点击清空会清空所有搜索条件,但是el-cascader会显示上一次选择的值,想不让节点高亮选中状态。
文档
查看文档,有个clearCheckedNodes
方法。
- 给cascader设置上
ref
,如下:
···
<el-cascader v-model.trim ="cId" ref="cascader" :options="category" @change="handleChange"></el-cascader>
···
然后调用
// 清空选中的节点
this.$refs.cascader.$refs.panel.clearCheckedNodes();
// 设置为空可以让节点不高亮显示
this.$refs.cascader.$refs.panel.activePath = [];
- 添加清空方法
if (this.$refs.cascader){
this.$refs.cascader.$refs.panel.clearCheckedNodes()
this.$refs.cascader.$refs.panel.activePath = []
this.$refs.cascader.$refs.panel.scrollIntoView()
this.$refs.cascader.$refs.input.$refs.input.setAttribute('aria-expanded', false)
this.$refs.cascader.$emit('visible-change', false)
this.$refs.cascader.$refs.panel.$emit('visible-change', false)
this.$refs.cascader.$refs.panel.$emit('close')
}