关于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);
    }
},

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据