el-table表格展开行 并且默认展开一行

在Vue.js的Element UI库中，`el-table`组件提供了一个强大的功能，即表格展开行（expand row）。当你需要显示部分数据的详细信息，而不是直接展示所有内容时，可以利用这个特性。默认展开一行通常是通过设置表头的属性来实现的。

例如，在`<el-table>`标签内，你可以设置`default-expanded-row-keys`属性，它是一个数组，包含了默认展开的行的key值。每个表格行都有一个唯一标识，通常由`index`或自定义的`key`属性提供。

这是一个简单的例子：

<template>
  <el-table
    :data="tableData"
    default-expanded-row-keys="['row1Key']" <!-- 这里假设row1Key对应的是第一行的键 -->
  >
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <!-- 添加一个列用于展开/折叠 -->
    <el-table-column type="expand">
      <template slot-scope="{ $index, row }">
        <p>这是第{{ $index + 1 }}行的详细信息</p>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, key: 'row1Key' },
        // 其他数据...
      ]
    };
  }
};
</script>