element-UI中使用树组件el-tree实现左侧勾选右侧列表展示并且列表删除某一项左侧树菜单取消相应勾选
需求
1、勾选的时候右侧列表会展示勾选的最终的子节点。
2、点击删除列表中某一项,就会对应的取消树状菜单的勾选状态。
3、支持搜索过滤。
已选成员
- 【element-UI中使用树组件el-tree实现左侧勾选右侧列表展示并且列表删除某一项左侧树菜单取消相应勾选】{{m.label}}
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 = https://www.it610.com/article/[];
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 = https://www.it610.com/article/res.data.data;
node.data.children = res.data.data;
console.log(data)
resolve(data);
}
});
}, 200);
},
},
watch: {
filterText (val) {
this.$refs.tree.filter(val);
}
},
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 由浅入深理解AOP
- 异地恋中,逐渐适应一个人到底意味着什么()
- 【译】20个更有效地使用谷歌搜索的技巧
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷(Invasion篇)发售