el-table 指定层级展开

先来看看页面默认全部展开时页面的显示效果：所有节点被展开，一眼望去杂乱无章！

那么如何实现只展开指定的节点呢？最终效果如下：一眼看去很舒爽。 

干货上代码：

if="refreshTable" v-loading="loading" :data="sourceList" row-key="id"
    :default-expand-all="isExpandAll" :expand-row-keys="expandRowKeysList"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
    
    <el-table-column label="来源名称" prop="name" />
    <el-table-column label="状态" align="center" prop="enabled">
        <template slot-scope="scope">
            <dict-tag :options="dict.type.msg_status" :value="scope.row.enabled" />
        template>
    el-table-column>
    <el-table-column label="创建者" align="center" prop="createBy" />
    <el-table-column label="创建日期" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}span>
        template>
    el-table-column>
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                v-hasPermi="['system:source:edit']">修改el-button>
            <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"
                v-hasPermi="['system:source:add']">新增el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                v-hasPermi="['system:source:remove']">删除el-button>
        template>
    el-table-column>

 核心代码注意：这三个属性，一定要注意使用。id即接口给你返回的每个节点的id，具体看你后端接口返回的命名。

row-key="id" 
:default-expand-all="isExpandAll" 
:expand-row-keys="expandRowKeysList"

isExpandAll在data中默认为false意为不要全部默认展开，即全部自动收起。否则指定展开无效。

isExpandAll:false

再来看看被展开节点的设置：将要展开节点的id放入expandRowKeysList数组中。

:expand-row-keys="expandRowKeysList"

data(){
    return {
        isExpandAll:false
//table哪些行默认开展
        expandRowKeysList:[]
    }
}

 调用接口：

methods: {
/** 查询项目来源列表 */
    getList() {
        let self = this
        listSource(this.queryParams).then(response => {
            this.sourceList = this.handleTree(response.data, "id", "pid");
            this.sourceList.forEach(element => 
            {
                self.expandRowKeysList.push(element.id + '')
            });
        });
    },
}

默认展开一级。如果你默认展开第二级，则修改以上代码，将二级节点的id压入数组中即可。