elementui 行列转换

在 ElementUI 中，可以使用 `<el-table>` 组件来实现行列转换。具体步骤如下：

1. 使用 `<el-table>` 组件渲染表格，设置 `:data` 属性为要显示的数据源。

<el-table :data="tableData"></el-table>

2. 使用 `<el-table-column>` 组件设置表头和表格列，设置 `:prop` 属性为数据源中对应的属性名。

<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="性别" prop="gender"></el-table-column>

3. 在需要进行行列转换的地方，使用 `v-for` 循环遍历表格列，使用 `v-for` 循环遍历数据行，使用 `:key` 属性设置唯一标识。

<el-table>
  <el-table-column label="属性" prop="attr"></el-table-column>
  <el-table-column v-for="item in tableData" :key="item.name" :label="item.name">
    {{ item[attr] }}
  </el-table-column>
  <el-table-column label="总计">
    {{ total[attr] }}
  </el-table-column>
</el-table>

4. 在数据源中添加一行数据，用于显示每列的总计。

tableData.push({
  attr: "总计",
  name: "",
  age: tableData.reduce((total, item) => total + item.age, 0),
  gender: ""
});

通过以上步骤，即可实现 ElementUI 中的行列转换。