利用el-tree实现搜索的联动功能
今天公司做项目碰见这样一个需求
点击搜索，出现搜索框，左中右出现联动效果一个选中，其他都选中，右侧出现选中的内容，搞了三天终于可以了
html
暂无搜索结果
-
{{
`${item.lastName}${item.firstName}(${item.userNo})`
}}
{{ item.org1 }}
/{{ item.org2 }}
/{{ item.org3 }}
/{{ item.org4 }}
/{{ item.org5 }}
/{{ item.org6 }}
加载更多...
取消
确认
**data函数中的数据**
treeData: [],
selectList: [],
input3: "",
defaultProps: {
children: "childrenDepartmentList",
label: "workDeptId",
},
pageNum: 0,
searchData: [],
isSearch: true,
checkedBox: [],
**methods中的方法**
//input框聚焦
focusHandle(val) {
this.pageNum = 1;
this.searchData = [];
},
//input框查询人
searchMembers(val) {
if (val == "") {
this.searchData = [];
} else {
let params = {
likeStr: val, // 姓名和工号
pageNum: this.pageNum, //当前页
pageSize: 20, //每页条数
applicationId: this.$store.state.applicationId,
};
api.serchMembers(params).then((res) => {
if (res.data.success == true) {
let searchArr = res.data.data.rows;
searchArr.forEach((item) => {
let result = this.searchData.some(
(it) => it.userNo == item.userNo
);
if (!result) {
this.searchData = this.searchData.concat([item]);
}
});
this.totalPages = res.data.data.totalPage;
this.pageNum += 1;
if (this.selectList) {
this.selectList.forEach((it) => {
this.searchData.forEach((item) => {
if (item.userNo == it.userNo) {
if (this.checkedBox.indexOf(item.id.toString()) == -1) {
this.checkedBox.push(item.id.toString());
}
}
});
});
}
if (this.searchData.length == 0) {
this.noData = true;
} else {
this.noData = false;
}
}
});
}
},
loadHandle() {
setTimeout((_) => {
this.searchMembers(this.input3);
}, 200);
},
// input 框失焦
blurVal() {
this.pageNum = 1;
},
//input 事件防止再次搜索时searchData 不清空
handleInput(val){
this.searchData = []
this.pageNum = 1
},
// 搜索中内容选中值
getSelected(val) {
let isExist = this.selectList.some((i) => i.userNo == val.userNo);
if (!isExist) {
this.selectList.push(val);
} else {
this.selectList.forEach((item, index) => {
if (item.userNo == val.userNo) {
this.selectList.splice(index, 1);
this.keysArr.splice(index, 1);
}
});
}
let keys = [];
keys = this.keysArr.filter((it) => it != val.id);
this.$refs.tree.setCheckedKeys(keys);
},
handleCheckclick(data, obj) {
this.keysArr = [];
this.loading = true;
let selectedData = [];
let orgIds = [];
orgIds.push(data.orgId);
let params = {
orgIds: orgIds,
type: 2,
};
api.groupMembers(params).then((res) => {
selectedData = res.data.data;
selectedData.forEach((it) => {
if (data.orgId && data.orgId == it.org) {
this.$set(
it,
"orgText",
it.lastName + it.firstName + "(" + it.userNo + ")"
);
let result = data.lowerOrg.some((item) => item.userNo == it.userNo);
if (!result) {
data.lowerOrg.push(it);
}
}
});
// 右侧已选中节点
this.keysArr = obj.checkedKeys;
if (this.keysArr.indexOf(data.id) != -1) {
// 防止搜索框中和树种的数据重复
selectedData.forEach((item, index) => {
let isExist = this.selectList.some(
(it) => it.userNo == item.userNo
);
if (isExist) {
this.selectList.splice(index, 1);
}
});
if (!data.orgId) {
let result = this.selectList.some(
(item) => item.userNo == data.userNo
);
if (!result) {
this.selectList = this.selectList.concat([data]);
}
} else {
selectedData.forEach((item) => {
let isExist = this.selectList.some(
(it) => it.userNo == item.userNo
);
if (!isExist) {
this.selectList = this.selectList.concat([item]);
}
});
// console.log(this.selectList,'2222')
}
// 搜索框里的对应数据进行勾选
this.selectList.forEach((item) => {
this.checkedBox.push(item.id.toString());
});
// 树形结构中对应得职员进行勾选
setTimeout((_) => {
// let checkedKeys = [];
selectedData.forEach((item) => {
this.keysArr.push(item.id);
});
this.$refs.tree.setCheckedKeys(this.keysArr);
}, 100); //先加载人再进行勾选
// 防止反显人员丢失
this.reverseArr.forEach((item) => {
let isExast = this.selectList.some((it) => it.id == item.id);
if (!isExast) {
this.selectList = this.selectList.concat([item]);
}
});
this.loading = false;
} else {
if (data.orgId) {
// 取消点击部门时，部门下所有人员都取消
for (let i = 0; i < selectedData.length; i++) {
for (let j = 0; j < this.selectList.length; j++) {
if (this.selectList[j].id == selectedData[i].id) {
this.selectList.splice(j, 1);
}
}
}
// for (let i = 0; i < this.selectList.length; i++) {
// for (let j = 0; j < selectedData.length; j++) {
// if (this.selectList[i].id == selectedData[j].id) {
// this.selectList.splice(i, 1);
// }
// }
// }
// for (let i = 0; i < this.selectList.length; i++) {
// if (this.selectList[i].org == data.orgId) {
// this.selectList.splice(i, 1);
// i--;
// }
// }
} else {
this.selectList.forEach((it, idx) => {
if (it.id == data.id) {
this.selectList.splice(idx, 1);
this.checkedBox.splice(idx, 1);
}
});
}
this.loading = false;
}
});
},
handleChecked(data, obj) {
// 右侧已选中节点
this.selectList = this.$refs.tree.getCheckedNodes(true, false);
let keysArr = obj.checkedKeys;
if (!data.children) {
if (keysArr.indexOf(data.id) != -1) {
this.checkedBox.push(data.label + "(" + data.id + ")");
} else {
this.checkedBox.forEach((item, index) => {
let id = Number(item.split("(")[1].split(")")[0]);
if (keysArr.indexOf(id) == -1) {
this.checkedBox.splice(index, 1);
}
});
}
} else {
this.rockBottomData(data.children);
}
},
// 使用递归获取tree树的最底层节点
rockBottomData(data) {
data.forEach(item =>{
if(!item.children){
this.checkedBox.push(item.label + "(" + item.id + ")");
}else{
this.rockBottomData(item.children)
}
})
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 取消
handleCancel() {
this.$refs.tree.setCheckedKeys([]);
this.selectList = [];
this.checkedBox = [];
this.dialogTableVisible = false;
},
// 选择员工内的删除
handleDelSelect(data, index) {
this.selectList.splice(index, 1);
this.$refs.tree.setChecked(data.id, false, true);
this.checkedBox.forEach((item, idx) => {
let id = item.split("(")[1].split(")")[0];
if (data.id == id) {
this.checkedBox.splice(idx, 1);
}
});
},
// 清空已选员工
delAll() {
this.selectList = [];
this.checkedBox = [];
this.$refs.tree.setCheckedKeys([]);
},
inputHandle() {
this.isSearch = !this.isSearch;
},
getSelected(val) {
if (val.length == 0) {
this.selectList = [];
this.$refs.tree.setCheckedKeys([]);
} else {
this.selectList = [];
val.forEach((item) => {
let id = item.split("(")[1].split(")")[0];
let label = item.split("(")[0];
this.selectList.push({ id: id, label: label });
});
let keys = []
this.selectList.forEach((item) => {
if(keys.indexOf(item.id) == -1){
keys.push(item.id)
}
this.$refs.tree.setCheckedKeys(keys);
});
}
},
// 获取职员
getMembers(data, node) {
this.keysArr.forEach((item) => {
if (item == node.data.id) {
node.checked = true;
}
});
let orgIds = [];
orgIds.push(data.orgId);
let params = {
orgIds: orgIds,
type: 2,
};
api.groupMembers(params).then((res) => {
res.data.data.forEach((it) => {
if (data.orgId && data.orgId == it.org) {
this.$set(
it,
"orgText",
it.lastName + it.firstName + "(" + it.userNo + ")"
);
let result = data.lowerOrg.some((item) => item.userNo == it.userNo);
if (!result) {
data.lowerOrg.push(it);
}
}
});
if (node.checked == false) {
//先搜索选择后加载人后再树中进行选择
setTimeout((_) => {
this.selectList.forEach((item) => {
let keys = [];
let isExist = data.lowerOrg.some((it) => it.id == item.id);
if (isExist) {
keys.push(item.id);
this.$refs.tree.setCheckedKeys(keys);
}
});
}, 100);
}
if (node.checked == true) {
setTimeout((_) => {
node.childNodes.forEach((item) => {
item.checked = true;
});
}, 100);
}
});
},
style样式
.distribution {
display: flex;
height: 500px;
margin-bottom: 40px;
.people,
.selectPeople {
flex: 1;
border: 1px solid #eee;
padding: 10px;
}
.search {
display: flex;
padding-bottom: 5px;
}
.tree {
height: 430px;
overflow: auto;
}
.people {
border-right: 0;
}
.selectPeople {
.selectText {
display: inline-block;
padding: 15px;
}
.delAll {
float: right;
padding: 15px;
cursor: pointer;
}
ul {
height: 420px;
overflow: auto;
li {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #eee;
padding: 15px;
div {
font-size: 5px;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: #3490ff;
color: #fff;
text-align: center;
line-height: 15px;
cursor: pointer;
}
}
}
}
/deep/ .refreshico {
border: none !important;
background-color: #fff !important;
}
}
.tree_btn {
position: absolute;
display: inline-block;
right: 40px;
bottom: 40px;
}
.selectBox {
width: 14px;
height: 14px;
display: inline-block;
border: 1px solid #ccc;
text-align: center;
line-height: 14px;
border-radius: 2px;
}
.el-icon-check {
background-color: #1890ff;
color: #fff;
transition: background-color 0.8s;
border: none;
}