vue.js 前端 elementui中el-select和el-tree实现下拉树形多选功能
实现效果如下： 代码如下： html中
ref="selectTree"
v-model="valueName"
:value="valueMultiple"
multiple
clearable
@remove-tag="changeValue"
@clear="clearHandle"
placeholder="请选择可用单位"
>
style="padding-left: 22px; margin-bottom: 6px;margin-top:2px"
>
>我所在的部门:
>{{myDepart.name}}
:value="valueName"
style="height: auto; background: #fff"
>
:data="data"
show-checkbox
ref="tree"
node-key="id"
id="tree-option"
default-expand-all
:props="defaultProps"
@check-change="handleNodeClick"
>
class="custom-tree-node"
slot-scope="{ data }"
>
{{ data.name }}
>
data中
valueName: [],
valueMultiple: [],
choosedValue: [],
mychecked: true,
allchecked: false,
myDepart: {
id: 9,
name: "三级 1-1-1",
},
data: [
{
id: 1,
name: "一级 1",
children: [
{
id: 4,
name: "二级 1-1",
children: [
{
id: 9,
name: "三级 1-1-1",
},
{
id: 10,
name: "三级 1-1-2",
},
],
},
],
},
{
id: 2,
name: "一级 2",
children: [
{
id: 5,
name: "二级 2-1",
},
{
id: 6,
name: "二级 2-2",
},
],
},
{
id: 3,
name: "一级 3",
children: [
{
id: 7,
name: "二级 3-1",
},
{
id: 8,
name: "二级 3-2",
},
],
},
],
defaultProps: {
value: "id",
children: "children",
label: "name",
},
mounted中
this.choosedValue=[]
this.choosedValue.push(this.myDepart.id)
this.$refs.tree.setCheckedKeys(this.choosedValue);
methods中
// 选择所属部门
myDepartChage(val){
if(val==true){
if(this.choosedValue.indexOf(this.myDepart.id)==-1){
this.choosedValue.push(this.myDepart.id)
}
this.choosedValue=[...new Set(this.choosedValue)]
this.$refs.tree.setCheckedKeys(this.choosedValue);
}else{
if(this.choosedValue.indexOf(this.myDepart.id)!=-1){
this.choosedValue.forEach((item,index)=>{
if(item==this.myDepart.id){
this.choosedValue.splice(index,1)
}
})
}
this.choosedValue=[...new Set(this.choosedValue)]
this.$refs.tree.setCheckedKeys(this.choosedValue);
}
},
// 全选
myAllChage(val){
if(val==true){
this.mychecked=true
this.data.forEach((item, index) => {
this.choosedValue.push(item.id)
});
this.choosedValue=[...new Set(this.choosedValue)]
this.$refs.tree.setCheckedKeys(this.choosedValue);
}else{
this.mychecked=false
this.choosedValue=[]
this.$refs.tree.setCheckedKeys([]);
}
},
// 点击树形选择节点
handleNodeClick(node, checked) {
if (checked) {
if (node.children == null || node.children == undefined) {
if(node.id==this.myDepart.id){
this.mychecked=true
}
let num = 0;
this.valueName.forEach((item) => {
item == node[this.defaultProps.label] ? num++ : num;
});
if (num == 0) {
this.valueName.push(node[this.defaultProps.label]);
this.choosedValue.push(node["id"]);
this.choosedValue=[...new Set(this.choosedValue)]
this.valueName=[...new Set(this.valueName)]
}
}
} else {
if (node.children == null || node.children == undefined) {
this.valueName.map((item, index) => {
if(node.id==this.myDepart.id){
this.mychecked=false
}
if (node.name == item) {
this.valueName.splice(index, 1);
}
});
this.choosedValue.map((item,index)=>{
if (node.id == item) {
this.choosedValue.splice(index, 1);
}
})
}
}
console.log(this.choosedValue)
console.log(this.valueName)
},
// 删除单个标签
changeValue(val) {
const a = this.findItemByName(this.data, val);
if(a.id==this.myDepart.id){
this.mychecked=false
this.choosedValue.forEach((item, index) => {
if (item == this.myDepart.id) {
this.choosedValue.splice(index, 1);
}
});
}
this.choosedValue.forEach((item, index) => {
if (item == a.id) {
this.choosedValue.splice(index, 1);
}
});
this.$refs.tree.setCheckedKeys(this.choosedValue);
},
// 递归找到符合的元素
findItemByName(items, targetName) {
for (let i = 0; i < items.length; i++) {
const currentItem = items[i];
if (currentItem.name === targetName) {
return currentItem;
}
if (currentItem.children) {
const foundItem = this.findItemByName(
currentItem.children,
targetName
);
if (foundItem) {
return foundItem;
}
}
}
},
// 清空所有标签
clearHandle() {
this.valueName = [];
this.mychecked=false
this.allchecked=false;
this.choosedValue=[]
this.clearSelected();
},
clearSelected() {
this.$refs.tree.setCheckedKeys([]);
},
css中 多选框元素太多的话 设置最大高度 超出最大高度后 上下滚动
.departAll{
::v-deep .el-select__tags{
max-height:90px;
overflow-y: auto;
}
}
推荐文章
您阅读本篇文章共花了：
发表评论