社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
项目需求:输入框点击弹出树形下拉结构,可多选或者单选。
解决方案:1.使用layui formSelect多选插件
2.基于vue+elementui 下拉框和树形控件组合成树形下拉结构
<el-form-item label="下拉树选择器">
<el-select v-model="mineStatus" placeholder="请选择" multiple collapse-tags>
<el-option :value="mineStatus" style="height: auto">
<el-tree :data="treedata" default-expand-all show-checkbox check-strictly node-key="id"
ref="tree" highlight-current :props="defaultProps"
@check-change="handleCheckChange"></el-tree>
</el-option>
</el-select>
</el-form-item>
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')
},
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!