ElementUI树状表格按选择层级展开

实现的功能是按照选择的层级对树状表格进行展开。
效果如下图所示

不展开

展开一层

展开2层

下面放代码。

        <el-select
                v-model="ExpandedNum"
                @change="handleExpandNumChange"
                placeholder="选择展开级别"
                size="mini"
                style="width: 100px;left: 0px;"
        >
            <el-option label="不展开" :value="0"></el-option>
            <el-option label="展开1" :value="1"></el-option>
            <el-option label="展开2" :value="2"></el-option>
            <el-option label="展开3" :value="3"></el-option>
        </el-select>
        <el-table
            :data="tableData1"
            style="width: 100%"
            :key="tabelKey"
            row-key="id"
            :expand-row-keys="expandID"
            border
            lazy
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>

当选择展开层级时，选择器value大于0，此时调用setExpandeKeys对tableData逐层进行处理。将需要展开的数据id压入expandID属性。展开列表数据是由el-table中的expand-row-keys属性控制，在该属性后面加入需要展开的id即可对其展开。

let app = new Vue({
        el: '#app',
        data: {
            ExpandedNum:0,
            tabelKey:true,
            // showTable:true,
            expandID:[],
            tableData1:[],
            tableData: [{
                id: 1,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                children: [{
                    id: 43,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    id: 24,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }]
            }, {
                id: 2,
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                id: 3,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                children: [{
                    id: 31,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                    children: [{
                        id: 343,
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        id: 324,
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }]
                }, {
                    id: 32,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }]
            }, {
                id: 4,
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
        },
        watch:{
            ExpandedNum:{
                deep:true,
                handler(val){
                    this.ExpandedNum = val
                }
            },

            ExpandedKeysCache:{
                deep:true,
                handler(val){
                    this.ExpandedKeysCache = val
                }
            },
        },
        created() {
            this.initTable()
        },
        methods: {
            initTable(){
              this.tableData1.push(...this.tableData)
            },
            handleExpandNumChange(){
            	this.expandID.splice(0);
      			this.tabelKey = !this.tabelKey;
                if(this.ExpandedNum > 0){
                    this.setExpandKeys(this.tableData)
                }
            },
            setExpandKeys(dataList, n){
                if(!n) n = 1
                for(let i = 0; i < dataList.length; i++){
                    if(n <= this.ExpandedNum){
                        this.expandID.push(`${dataList[i].id}`)
                        if(dataList[i].hasOwnProperty('children')){
                            const children = dataList[i].children
                            this.setExpandKeys(children, n + 1)
                        }
                    }
                }
            },

        },