el-cascader 选中最后一级
时间: 2023-07-22 13:38:02 浏览: 54
要实现 el-cascader 选中最后一级,可以通过以下步骤进行:
1. 监听 el-cascader 的 change 事件,获取选中节点的值。
2. 判断选中节点是否为最后一级,可以通过判断该节点是否有子节点来判断。
3. 如果选中节点是最后一级,则将其值保存下来,如果不是最后一级,则清空保存的值。
以下是示例代码:
```
<template>
<el-cascader
v-model="selectedOptions"
:options="options"
@change="handleChange">
</el-cascader>
</template>
<script>
export default {
data() {
return {
options: [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'shejiyuanze',
label: '设计原则',
children: [
{
value: 'yizhi',
label: '一致'
},
{
value: 'fankui',
label: '反馈'
},
{
value: 'xiaolv',
label: '效率'
},
{
value: 'kekong',
label: '可控'
}
]
},
{
value: 'daohang',
label: '导航',
children: [
{
value: 'cexiangdaohang',
label: '侧向导航'
},
{
value: 'dingbudaohang',
label: '顶部导航'
}
]
}
]
}
],
selectedOptions: []
}
},
methods: {
handleChange(value) {
if (value.length > 0 && this.hasChildren(value[value.length - 1])) {
// 如果选中节点不是最后一级,则清空保存的值
this.selectedValue = null;
} else {
// 如果选中节点是最后一级,则保存其值
this.selectedValue = value[value.length - 1];
}
},
hasChildren(node) {
// 判断节点是否有子节点
return node.children && node.children.length > 0;
}
}
}
</script>
```