el-cascader多选 但是v-model只取最后一级的值

El-Cascader 是 Element UI 中的一个下拉选择组件，它支持树状结构的选择，适合分层数据的展示。当启用多选模式时，`v-model` 绑定的值默认会是一个数组，包含了用户选择的所有层级的数据。

如果你只想获取最后一级的选择项，你可以通过处理 `value` 数组来达到目的。在每次用户选择新的节点时，你可以检查新数组的最后一项是否已经改变了，如果是，则更新单个最后一级的值，而不是整个数组。这通常涉及到在自定义事件处理器（如 `change` 事件）中对数组进行操作。

例如：

<el-cascader v-model="selectedLevel" :props="{ multiple: true }"></el-cascader>
data() {
  return {
    selectedLevel: [] // 初始值为空数组
  };
},
methods: {
  handleLastLevelChange(newValue) {
    if (newValue.length > 0 && newValue !== this.selectedLevel) { // 检查是否有变化
      this.selectedLevel = [newValue[newValue.length - 1]]; // 取最后一个元素
    }
  }
}

当 `selectedLevel` 改变时，`handleLastLevelChange` 方法会被调用，并保持最新的最后一级选择。

相关问题

el-cascader多选回显

对于el-cascader多选回显的问题，您可以通过以下代码实现：

<template>
<el-cascader
v-model="selectedOptions"
:options="options"
:props="props"
@change="handleChange"
clearable
filterable
multiple
collapse-tags
placeholder="请选择"
/>
</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: "可控"
}
]
},
{
value: "daohang",
label: "导航",
children: [
{
value: "cexiangdaohang",
label: "侧向导航"
},
{
value: "dingbudaohang",
label: "顶部导航"
}
]
}
]
}
],
props: {
multiple: true,
checkStrictly: true,
value: "value",
label: "label",
children: "children"
}
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
</script>

这段代码实现了一个多选的el-cascader组件，并且可以回显已选中的选项。

el-cascader多选隐藏

el-cascader多选隐藏可以通过使用ref来实现。具体实现方法如下：
1.在el-cascader标签上添加ref属性，例如ref="myCascader"。
2.在需要隐藏的时候，通过this.$refs.myCascader.dropDownVisible = false来实现隐藏。
同时，如果需要点击文字选中并且选中后选择框隐藏，可以通过以下步骤实现：
1.在el-cascader标签上添加expand-trigger="click"属性，使得点击文字也可以展开下拉框。
2.在change事件中添加this.$refs.myCascader.dropDownVisible = false来实现选中后选择框隐藏。
具体代码实现可以参考以下示例：

<el-cascader ref="myCascader" v-model="selectedOptions" :options="options" expand-trigger="click" @change="handleChange"></el-cascader>

// 在需要隐藏的时候调用
this.$refs.myCascader.dropDownVisible = false;

// change事件中添加隐藏选择框的代码
handleChange(value) {
  this.selectedOptions = value;
  this.$refs.myCascader.dropDownVisible = false;
}