element-ui 中el-select 嵌套 tree树形控件 element-ui

element-ui 中el-select 嵌套 tree树形控件

最近项目中要求要有一个下拉框，里面的选项可以折叠并且多选
我第一反应用Cascader 级联选择器不就好啦，多简单啊
但是，他要求不要在右边展开子选项
只能下拉展开
这个时候我就想起用select，嵌套tree控件
不是就刚好满足了要求嘛

//option展开高度太小，把height设置为auto就好啦

js部分

> export default { data() { return { mineStatus: "", mineStatusValue: [], data: [ { id: 1, label: "一级 1", children: [ { id: 4, label: "二级 1-1" } ] }, { id: 2, label: "一级 2", children: [ { id: 5, label: "二级 2-1" }, { id: 6, label: "二级 2-2" } ] }, { id: 3, label: "一级 3", children: [ { id: 7, label: "二级 3-1" }, { id: 8, label: "二级 3-2" } ] } ], defaultProps: { children: "children", label: "label" } }; }, methods: { //select框值改变时候触发的事件 selectChange(e){ var arrNew = []; var dataLength = this.mineStatusValue.length; var eleng = e.length; for(let i = 0; i< dataLength ; i++){ for(let j = 0; j < eleng; j++){ if(e[j] === this.mineStatusValue[i].label){ arrNew.push(this.mineStatusValue[i]) } } } this.$refs.tree.setCheckedNodes(arrNew); //设置勾选的值 }, handleCheckChange() { let res = this.$refs.tree.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点） let arrLabel = []; let arr = []; res.forEach(item => { arrLabel.push(item.label); arr.push(item); }); this.mineStatusValue = https://www.it610.com/article/arr; this.mineStatus = arrLabel; console.log('arr:'+JSON.stringify(arr)) console.log('arrLabel:'+arrLabel) } } }; >

【element-ui 中el-select 嵌套 tree树形控件】