需要
1、勾选的时候右侧列表会展现勾选的最终的子节点。
2、点击删除列表中某一项，就会对应的勾销树状菜单的勾选状态。
3、反对搜寻过滤。
<div class="flex-between">
<div>
<el-input
placeholder="输出关键字进行过滤"
v-model="filterText">
</el-input>
<el-tree ref="tree" :load="loadNode" lazy
:data="treeData" show-checkbox node-key="id"
:default-expanded-keys="[1]" :filter-node-method="filterNode"
:props="defaultProps" @check="fnClickNode">
</el-tree>
</div>
<div>
<p> 已选成员 </p>
<ul>
<li v-for="(m, i) in selectedMumberList" :key="i">
<p>{{m.label}}</p>
<i class="el-icon-close remove-icon" @click="removeMumber(m,i)"></i>
</li>
</ul>
</div>
</div>data(){
return {treeData: [],
filterText:'',
// 树状菜单默认项
defaultProps: {
children: 'children',
label: 'label'
},
appPid: 0,
selectedMumberList: []}
},
methods: {
// 搜寻过滤
filterNode (value, data) {if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点点击
fnClickNode () {
// 获取选中的子节点列表
// getCheckedNodes 的第一个参数为 false，示意连同父节点一并获取，true 只获取子节点
let selectedMumberList = this.$refs.tree.getCheckedNodes(false, false);
selectedMumberList = selectedMumberList.filter(item => !item.children);
this.selectedMumberList = selectedMumberList;
},
// 移除勾选人员
removeMumber (nodeObj, index) {
this.$confirm('确定删除此成员吗?', '提醒', {
confirmButtonText: '确定',
cancelButtonText: '勾销',
type: 'warning'
}).then(() => {
// 删除列表中点击的那一项
this.selectedMumberList.splice(index, 1);
// 勾销对应删除列表的节点的选中状态
this.$refs.tree.setChecked(nodeObj.id, false, true);
this.$message({
type: 'success',
message: '删除胜利!'
});
}).catch(() => {});
},
// 获取初始数据
loadNode(node, resolve) {
let that = this;
setTimeout(() => {var data = [];
let params = {
"page":1,
"size":10,
"appPid": node.data.id || 0
}
that.$axios.post('/app/list', params).then(res => {if(res.data.state == 200){console.log(res);
res.data.data.map(item => {
item.id = item.appId;
item.label = item.appName;
item.parentId = node.data.id || 0;
})
data = res.data.data;
node.data.children = res.data.data;
console.log(data)
resolve(data);
}
});
}, 200);
},
},
watch: {filterText (val) {<http://https://blog.csdn.net/CherryLee_1210/article/details/110184172>this.$refs.tree.filter(val);
}
},