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來查找的，所以記得綁定呦。
希望大家少走彎路。