|
el-select + el-tree结合下拉框树
话不多说先上代码
使用el的下拉框和树的代码
<el-select v-model="mineStatus" placeholder="请选择" multiple clearable @clear="clearable" collapse-tags @visible-change="selectcar" @remove-tag="remove">
<el-option :value="mineStatusValue" style="height: auto">
<el-tree :data="trees" :default-expanded-keys="['总分组']" show-checkbox node-key="name" ref="tree"highlight-current :props="defaultProps" @check="handleCheckChange"></el-tree>
</el-option>
</el-select>
定义树,下拉框显示的值
data() {
return {
defaultProps: {
children: "children",
label: "name",
id: "id"
},
mineStatus: [],
mineStatusValue: [],
trees: [],
}
methods: {
//当复选框勾选中时,给下拉框赋值并且给查询条件赋值
handleCheckChange() {
let res = this.$refs.tree.getCheckedNodes();
let arrLabel = [];
let arr = [];
res.forEach(item => {
arrLabel.push(item.name);
arr.push(item);
});
this.mineStatusValue = arr;
this.mineStatus = arrLabel;
for (let i in arr) {
this.paginations.groupIds.push(arr[i].id);
}
},
//当多选时候,删除小标签时,将删除的子节点状态改为未勾选,重新查找车辆
remove(val) {
this.paginations.groupIds = [];
this.$refs.tree.setChecked(val, false);
let arr = this.$refs.tree.getCheckedNodes();
for (let i in arr) {
this.paginations.groupIds.push(arr[i].id);
}
this.postcar(this.paginations.groupIds);
},
//清除所有选项
clearable() {
this.paginations.groupIds = [];
this.cars = [];
this.$refs.tree.setCheckedKeys([]);
},
//下拉框退回时查找车辆
selectcar(val) {
if (val === false) {
this.postcar(this.paginations.groupIds);
}
},
// 根据分组查车辆
postcar(ids) {
if (ids.length !== 0) {
remoteUpgrades._postcar(ids).then(
res => {
this.cars = res.data;
},
err => {
console.log(err);
}
);
} else {
this.cars = [];
}
},
}
最后效果展示
第一次写博客,有什么不对地方,需要改进的地方欢迎指出