<template>
<div>
<el-select
@change="selectChange"
@clear="handleSelectClear"
@remove-tag="removeTag"
:filter-method="remoteMethod"
class="elSelect"
v-model="selectArr"
placeholder="请选择"
:multiple="true"
:clearable="true"
:collapse-tags="false"
:filterable="true"
>
<el-option v-model="selectArr">
<el-tree
:data="nav"
:props="childProps"
ref="selectTree"
:check-strictly="false"
:show-checkbox="true"
:check-on-click-node="true"
:filter-node-method="filterNode"
:node-key="childProps.value"
:default-expanded-keys="defaultExpandedKey"
:default-checked-keys="defaultExpandedKey"
@check-change="handleCheckChange"
@check="checkNode"
></el-tree>
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectTreeData: [],
selectArr: [],
defaultExpandedKey: [],
};
},
props: {
value: {
type: Array,
require: true,
},
nav: {
type: Array,
require: true,
},
childProps: {
type: Object,
require: true,
},
},
watch: {
nav: {
handler(newVal, oldVal) {},
deep: true,
},
value: {
handler(newVal, oldVal) {
if (newVal && newVal.length > 0) {
this.selectTreeData = [];
this.selectArr = [];
this.defaultExpandedKey = newVal;
this.$nextTick(() => {
newVal.forEach((item) => {
this.digui(this.nav, item);
});
});
let that = this;
this.$nextTick(() => {
that.$refs.selectTree.setCheckedKeys(newVal);
});
// this.$refs.selectTree.setCheckedKeys(this.defaultExpandedKey);
}
},
deep: true,
immediate: true,
},
},
methods: {
digui(data, value) {
data.forEach((item) => {
if (item.children) {
this.digui(item.children, value);
} else {
if (item.index == value) {
this.selectTreeData.push(item);
this.selectArr.push(item.name);
}
}
});
},
//下拉清空
handleSelectClear() {
this.value = [];
this.$emit("input", this.value);
this.$refs.selectTree.setCheckedKeys([]);
// this.activeObj.child.index = [];
},
//下拉标签删除
removeTag(data) {
if (this.selectArr.includes(data)) {
this.selectArr.splice(
this.selectArr.findIndex((item) => item == data),
1
);
}
let findIndexd = this.selectTreeData.findIndex(
(item) => item.name == data
);
this.selectTreeData.splice(findIndexd, 1);
this.defaultExpandedKey.splice(findIndexd, 1);
this.value = this.defaultExpandedKey;
this.$emit("input", this.value);
this.$nextTick(() => {
this.$refs.selectTree.setCheckedKeys(this.defaultExpandedKey);
});
},
//树过滤
remoteMethod(val) {
this.$refs.selectTree.filter(val);
},
filterNode(value, data) {
// 2019/04/10 删除自定义的过滤
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
handleNodeClick(node) {
if (!this.selectArr.includes(node.name)) {
if (!node.children) {
this.selectArr.push(node.name);
this.selectTreeData.push(node);
this.defaultExpandedKey.push(node.index);
}
this.value = this.defaultExpandedKey;
this.$emit("input", this.value);
// this.activeObj.child.index = this.defaultExpandedKey;
} else {
let index = -1;
this.selectArr.forEach((item, i) => {
if (item == node.name) {
index = i;
}
});
this.selectArr.splice(index, 1);
this.selectTreeData.splice(
this.selectTreeData.findIndex((item) => item.name == node.name),
1
);
this.defaultExpandedKey = [];
this.selectTreeData.forEach((item) => {
this.defaultExpandedKey.push(item.index);
});
}
},
checkNode(node, treeStatus) {
this.selectArr = [];
this.defaultExpandedKey = [];
this.selectTreeData = [];
treeStatus.checkedNodes.forEach((item) => {
if (!item.children) {
this.selectArr.push(item.name);
this.defaultExpandedKey.push(item.index);
let obj = {};
obj.index = item.index;
obj.name = item.name;
this.selectTreeData.push(obj);
}
});
this.value = this.defaultExpandedKey;
this.$emit("input", this.value);
// this.activeObj.child.index = this.defaultExpandedKey;
},
},
};
</script>
<style scoped>
::v-deep .el-tree {
background: #27343e !important;
}
</style>
