<div class="block">
<span class="demonstration">hover 触发子菜单</span>
<el-cascader
:disabled="disabledSelect"
:multiple="true"
v-model="value"
:options="gsmcs"
:show-all-levels="false"
ref="cityNameTree"
:props="optionProps"
@change="handleChange"></el-cascader>
</div>
//注释 :multiple="true"是否可多选
//注释 :show-all-levels="false" 可以仅在输入框中显示选中项最后一级的标签,而不是选中项所在的完整路径。
<script>
export default {
data() {
return {
value: [],
ssdwlists: "",
disabledSelect: false, //是否禁用
gsmcs: [], //获取的数据列表
optionProps: {
value: "orgId",
label: "orgName",
children: "orgList",
multiple: true, //实现可以多选多个叶子节点
checkStrictly:true, //选择任意一级选项:在单选模式下,你只能选择叶子节点;而在多选模式下,勾选父节点真正选中的都是叶子节点。启用该功能后,可让父子节点取消关联,选择任意一级选项。
expandTrigger:'hover', //触碰选项可展示出子选项,无需点击
},
};
},
methods: {
handleChange(value) {
console.log(value);
if(!value.length) {
this.ssdwlists = "";
}else {
let ssdwListData = this.$refs["cityNameTree"].getCheckedNodes();
this.ssdwlists = ssdwListData.map((e) => e.value).join(",")
}
},
//获取数据
getData() {
.....
this.gsmcs = res.data
//res.data数据展示:data:[
// 0: {
// orgId: "010101",
// orgName: "组织名称1",
// orgList: [
// { orgId:"0808",orgName: "子组织名称1"},
// { orgId:"0809",orgName: "子组织名称3"},
// { orgId:"0800",orgName: "子组织名称3"}
// ]
// }
// ]
}
}
};
</script>
el-cascader级联选择器多选用法
于 2023-02-28 15:51:47 首次发布