elementUi使用el-table表格组件 实现树形数据默认自动展开第一层级（或指定的某一层，或多层）的使用

        需求：vue项目使用el-table表格组件，需要实现列表页的树形数据默认自动展开第一层级功能（暂不考虑懒加载情况）。

        之前实现是:default-expand-all="false"，默认关闭所有行。现在用户提出，点击进入列表页需要默认自动展示第一层数据。elementUi给到了expand-row-keys这个属性。该属性值为数组，官方解释用法如下：

        彩蛋：一定要注意expand-row-keys这个属性的属性值数组的元素是需要number还是string！！！一不小心就掉坑里，调试都很难找到问题，控制台打印也不报错。直接上代码：

        一、HTML结构代码：

// html 
// el-table 的配置如下所示:

<div class="tableCC">
  <!-- default-expand-all: 是否默认展开所有行 Boolean (当 Table 包含展开行存在或者为树形表格时有效)  -->
  <!-- expand-row-keys: 该属性为展开行的 keys 数组，可以通过这属性设置 Table 目前的展开行，它需要设置 row-key 属性才能使用。 -->
  <el-table 
    :data="tableData" 
    style="width: 100%;margin-bottom: 30px;"
    row-key="ccId" 
    border 
    :default-expand-all="false" 
    :expand-row-keys="expandedRowKeys" 
    :tree-props="{children: 'children'}"
    >
    <el-table-column v-for="(item) in columnList" :key="item.name" :prop="item.name" :label="item.text" :align="item.align" show-overflow-tooltip>
      <template slot-scope="scope">
        <span v-if="item.val">{{ item.val(scope.row[item.name]) }}</span>
        <span v-else>{{scope.row[item.name]}}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="120px;">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="editRow(scope.row)">编辑</el-button>
        <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.row.ccId,scope.row.parentId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

    二、javascript代码如下：

//javascript

export default {
  name: 'CCpage1',
  data() {
    return {
      tableData: [],
      expandedRowKeys: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList(){
      //调用列表页接口，获取数据
      personListAction({}).then(res => {
        this.tableData = res.page.list || [];
        console.log('this.tableData:',this.tableData)
        // 使用Vue.nextTick确保DOM更新后再设置expandedRowKeys
        this.$nextTick(() => {
          this.expandedRowKeys = this.tableData
            .filter(item => item.parentId === 1 || item.parentId === null)
            .map(item => item.ccId);
        });
        console.log('this.expandedRowKeys:',this.expandedRowKeys)
      });
    }
  }
}

        以上代码运行后，控制台不报错，打印的值也是预期的值。该树形数据结构列表页就是不能默认自动展开第一层级的效果。仔细研究过elementui官网给到的expand-row-keys解释用法并没有让我解惑。接下来我就是一顿百度加查看各种链接文章。终于在一篇文章中让我找到了原因，以上代码不变，只要在其中一句代码中，将.map(item => item.ccId);   改为  .map(item => (item.ccId).toString());  即可实现点击进入列表页 树形数据默认自动展开第一层级的功能。修改后的代码如下：

//javascript

export default {
  name: 'CCpage1',
  data() {
    return {
      tableData: [],
      expandedRowKeys: [],
      queryData: {}
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList(){
      //调用列表页接口，获取数据
      personListAction({}).then(res => {
        this.tableData = res.page.list || [];
        // 使用Vue.nextTick确保DOM更新后再设置expandedRowKeys
        this.$nextTick(() => {
          this.expandedRowKeys = this.tableData
            .filter(item => item.parentId === 1 || item.parentId === null)
            .map(item => (item.ccId).toString());//将数组元素的数字改为string
        });
      });
    }
  }
}

        实现效果：

 附录：

参考文章地址：element的Table表格组件树形数据与懒加载简单使用-CSDN博客