element-UI中使用树组件el-tree实现左侧勾选右侧列表展示并且列表删除某一项左侧树菜单取消相应勾选

需求
1、勾选的时候右侧列表会展示勾选的最终的子节点。
2、点击删除列表中某一项，就会对应的取消树状菜单的勾选状态。
3、支持搜索过滤。

    

        
        
        
        
    
    

        
已选成员
        

            

                
{{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 = [];
            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) {
        this.$refs.tree.filter(val);
    }
},