el-cascader 级联选择器多选只保留最后一级的id
时间: 2024-10-16 12:03:44 浏览: 65
el-cascader 是 Element UI 中的一个组件,它是一个级别的多级联动选择器。当你设置它的 `props.multiple` 属性为 `true` 时,它支持多选功能。如果你想在用户选择过程中只保留最后一级的 id,可以在数据处理层(如 Vuex、Redux 或者自定义逻辑)中控制。
当用户完成多级选择后,你可以遍历他们所选的节点,取出每一级的最后一个节点的 id,并更新状态或视图。例如:
```javascript
// 假设 selectedIds 是用户当前的选择数组
const filteredIds = selectedIds.reduce((acc, item) => {
if (Array.isArray(item)) { // 如果是多级节点
acc.push(item[item.length - 1].id); // 取最后一个节点ID
} else {
acc.push(item.id);
}
return acc;
}, []);
// 更新状态或者视图用到的filteredIds
```
如果你是在 Vue 的 computed 或 watch 中处理这个逻辑,可以这样做:
```vue
<template>
<el-cascader :options="options" v-model="selectedIds" :multiple="true"></el-cascader>
</template>
<script>
export default {
data() {
return {
selectedIds: [],
};
},
computed: {
filteredLastLevelIds() {
return this.selectedIds.map(item => {
// ...上面提到的数据处理逻辑...
});
},
},
};
</script>
```
阅读全文