Element-ui中el-table展开行

在Element UI中，可以使用<el-table>组件的row-key属性来设置行的key，并使用<el-table-column>的type="expand"来实现行的展开功能。以下是一个简单的示例：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    border
    lazy
  >
    <!-- 其他列 -->
    <el-table-column type="expand">
      <template slot-scope="props">
        <!-- 这里放置你想要展开后显示的内容 -->
        <p>{{ props.row.description }}</p>
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          // 其他字段
          description: '这是第一行的详细描述。'
        },
        // 其他数据行
      ]
    };
  }
};
</script>

在这个例子中，我们设置了row-key="id"来指定每行的唯一标识，然后定义了一个展开列，在展开后显示该行的description字段内容。记得确保你的数据中有一个唯一的字段来作为row-key的值。