项目需求:输入框点击弹出树形下拉结构,可多选或者单选。
解决方案:1.使用layui formSelect多选插件
2.基于vue+elementui 下拉框和树形控件组合成树形下拉结构
ref="tree" highlight-current :props="defaultProps"
@check-change="handleCheckChange">
data: function () {
return {
mineStatus: "",
treedata: [],
defaultProps: {
children: "children",
label: "name"
},
}
},
handleCheckChange(data, checked, node) {
let res = this.$refs.tree.getCheckedNodes(false, true); //true,1. 是否只是叶子节点 2.选择的时候不包含父节点)
if (checked) {
this.$refs.tree.setCheckedNodes([data]);
}
let arrLabel = [];
// console.log(res, 'res')
res.forEach(item => {
if (arrLabel.length === 0) {
arrLabel.push(item.name);
} else {
arrLabel.length === 0;
}
});
this.mineStatus = arrLabel;
// console.log(arrLabel, 'arrLabel')
},