el-cascader多选模式下根据值是否折叠Tag,
时间: 2023-07-08 22:06:49 浏览: 167
如果你想实现根据值是否折叠标签的功能,可以使用 `el-cascader` 的 `beforeToggle` 属性。该属性接收一个函数,在标签展开或折叠之前触发该函数。你可以在该函数中根据标签的值来判断是否需要折叠标签,具体实现如下:
```html
<template>
<el-cascader
v-model="selectedOptions"
:options="options"
:beforeToggle="handleBeforeToggle"
multiple
collapse-tags
separator="/"
clearable
></el-cascader>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [
{
value: "zhinan",
label: "指南",
children: [
{
value: "shejiyuanze",
label: "设计原则",
children: [
{
value: "yizhi",
label: "一致",
},
{
value: "fankui",
label: "反馈",
},
{
value: "xiaolv",
label: "效率",
},
{
value: "kekong",
label: "可控",
},
],
},
],
},
],
};
},
methods: {
handleBeforeToggle(node) {
if (this.selectedOptions.includes(node)) {
// 如果该节点已经被选中,则不折叠标签
return false;
} else {
// 如果该节点未被选中,则折叠标签
return true;
}
},
},
};
</script>
```
在上述代码中,我们给 `el-cascader` 组件添加了 `beforeToggle` 属性,并将其绑定到 `handleBeforeToggle` 方法上。该方法接收一个节点对象作为参数,在该方法中我们判断该节点是否被选中,如果已经被选中,则返回 false ,表示不折叠标签;如果未被选中,则返回 true ,表示折叠标签。最后我们将这个方法绑定到 `beforeToggle` 属性上,从而实现了根据值是否折叠标签的功能。
阅读全文