关于vue.js:elementUI中使用树组件eltree实现左侧勾选右侧列表展示并且列表删除某一项左侧树菜单取消相应勾选

需要
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);
    }
},