解决element-plus 的 el-table-column 组件使用expand 属性后下一列也会展开的问题

背景

在使用element-plus 的 el-table-column 组件时用到了展开行的功能，使用方法很简单，给el-table-column 元素添加 type="expand" 属性即可。

<!-- 角色列表 -->
    <el-table :data="roleList" row-key="id" style="width: 100%" border>
      <!-- 展开行 -->
      <el-table-column label="#" type="expand">
        <template #default="{ row }">
        </template>
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称" />
      <el-table-column prop="roleDesc" label="角色描述" />
    </el-table>
  </el-card>

问题

在浏览器中打开时，发现Date 列也出现了展开效果

原因

可以看出来第二列的展开效果是树形结构。查看element-plus 文档找到了问题所在：

再看看我们的数据和代码：代码中添加了row-key 属性，数据也是包含children 字段，正好符合显示树形数据的要求。

为什么要加入row-key 属性可以查看这篇文章：解决vue3+element-plus 使用table 展开行时，删除或更新展开行中的数据，展开行自动合闭的问题

解决

可以通过显示设置其余列 type="" 来解决。

<!-- 角色列表 -->
    <el-table :data="roleList" row-key="id" style="width: 100%" border>
      <!-- 展开行 -->
      <el-table-column label="#" type="expand">
        <template #default="{ row }">
        </template>
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称" type="" />
      <el-table-column prop="roleDesc" label="角色描述" type="" />
    </el-table>
  </el-card>