Element-ui树形控件el-tree复选框和el-table表格结合

Element-ui树形控件el-tree复选框和el-table表格结合

需求： vue-cli中选中左边el-tree的复选框，将数据展示到右侧el-table表格；从表格中删除数据同步将左侧对应复选框的选中状态取消。有默认选中状态。

直接上代码：

<template>
    <div class="menu" >
         <div class="left">
             <el-tree 
                class="treeitems"
                :data="data"
                show-checkbox
                node-key="id"
                :props="defaultProps" 
                @node-click="handleNodeClick"
                @check-change="handleCheck"
                default-expand-all
                ref="tree"
            >
            </el-tree>
        </div>
        <div class="right">
            <el-table
                :data="tableData"
                style="width: 100%"
                max-height="650">
                <el-table-column
                fixed
                prop="label"
                label="城市"
                width="160">
                </el-table-column>
                <el-table-column
                fixed
                prop="id"
                label="id"
                width="160">
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <i @click="deleteRow(scope.$index, tableData,scope.row.id)"
                        class="tablei el-icon-delete">
                    </i>
                </template>
                </el-table-column>
            </el-table>
        </div>
        
    </div>
</template>
<script>
export default {
    data() {
      return {
        tableData: [],
        data: [{
            id:0,
            label: '中国',
            children: [{
                id:1,
                label: '北京',
                children: [{
                    id:11,
                    label: '通州'
                },{
                    id: 17,
                    label: '顺义'
                }]
            },
            {   
                id:3,
                label: '山西',
                children:[{
                    id: 13,
                    label: '太原'
                },{
                    id: 14,
                    label: '阳泉'
                },{
                    id:16,
                    label: '长治'
                }]
            },{
                id:4,
                label: '黑龙江',
                children: [{
                    id:12,
                    label: '哈尔滨'
                },{
                    id:13,
                    label: '齐齐哈尔市'
                },{
                    id: 14,
                    label: '牡丹江'
                },{
                    id: 15,
                    label: '佳木斯'
                }]
            }], 
        }],
        defaultProps: {
          children: 'children',
          label: 'label',
        }
      };
    },
    watch:{
    },
    methods: {
        handleNodeClick(data) {
            console.log(data);
        },
       //复选框点击事件
        handleCheck(data,change){
            let nodes = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes()) 
            let filterNodes = nodes.filter(node=>{ // 过滤出子节点，也就是不含childred字段的节点数据
                return node.children === undefined
            })
            this.tableData=filterNodes;//赋值给表格数据
        },
        //删除按钮
        deleteRow(index,rows,id){
            this.$refs.tree.setChecked(id,false);//取消左侧复选框的选中状态
            rows.splice(index,1)//从tableData中删除数据
        },
        //复选框默认选中状态,应在请求数据处调用
        //现在用的是本地数据，如果导入的是请求后的来的数据，并且有返回是否选中的字段，可以将已选中的那些数据的id遍历出来一个数组，类似于[1,2,3],然后放到下方；
        selection(arrDa){
            this.$nextTick(() => {
                this.$refs.tree.setCheckedKeys([],true)//默认选中状态
            })
        },
    }
}

关于为什么使用this.$nextTick( [callback, context] );不用的话会报一个[Vue warn]: Error in event handler for “click”: “TypeError: Cannot read property ‘setCheckedKeys’ of undefined”

this.$nextTick用法：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
该篇所有方法都是el-tree中绑定的node-key=“id”；也就是根据id来查找的，所以记得绑定呦。
希望大家少走弯路。