Vue ElementUI Tree component echo problem (setting will select all the children of the choice of the parent, have this business scenario is not appropriate)

There is such a problem business scenarios

Front-end business requirements need to be saved 半选节点

solution

let checked = this.$refs.menuTree.getCheckedKeys();
//此方法获取半选节点
let halfChecked = this.$refs.menuTree.getHalfCheckedKeys();
//我们合并两个数组,便获取到了我们选中的节点及半选节点
let cArr=checked.concat(halfChecked);

After the service data contained half-selected node will select all child nodes when his echo in front? ? ? ! ! We expect non

One solution, removing the parent node information of service data

let resData=[]//获取后端数据(包含半选节点,数据结构为 数组...[{id:XX,pid:XXX},...])
let checked = [];//需要选中的节点
let pidArr=[];//获取父节点
for (let item of resData) {
    pidArr.push(item.pid);
}

for (let item of resData) {
    let id=item.id;
    let isP=pidArr.includes(id);
    if(!isP){
        checked.push(id);
    }
}

this.$nextTick(function () {
    that.$refs.menuTree.setCheckedKeys([]);
    that.$refs.menuTree.setCheckedKeys(checked);
});

Guess you like

Origin www.cnblogs.com/dadiwm321/p/elemelt_ui_tree.html