element的select和tree树形组件组合
原创
<body>
<div id="app">
<el-select v-model="mineStatus" placeholder="请选择" multiple @change="selectChange">
<el-option :value="mineStatusValue" style="height: auto">//option展开高度太小，把height设置为auto就好啦
<el-tree :data="data" show-checkbox node-key="id" ref="tree" highlight-current :props="defaultProps"
@check-change="handleCheckChange"></el-tree>
</el-option>
</el-select>
</div>
<script>
new Vue({
el: "#app",
data: function () {
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: {
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 = [];
console.log(res)
res.forEach(item => {
arrLabel.push(item.label);
arr.push(item);
});
this.mineStatusValue = arr;
this.mineStatus = arrLabel;
console.log('arr:' + JSON.stringify(arr))
console.log('arrLabel:' + arrLabel)
}
}
})
</script>
</body>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
