el-table prop为数组时，所对应属性的单元格行拆分为多行

如果 `el-table` 的 `prop` 对应的数据是数组，单元格行会自动拆分为多行。

例如，如果你的 `el-table` 数据如下：

<el-table :data="[
  { name: '张三', hobbies: ['游泳', '打篮球', '看电影'] },
  { name: '李四', hobbies: ['跑步', '唱歌'] }
]">
  <el-table-column label="姓名" prop="name"></el-table-column>
  <el-table-column label="爱好" prop="hobbies">
    <template slot-scope="scope">
      <div v-for="(hobby, index) in scope.row.hobbies" :key="index">{{ hobby }}</div>
    </template>
  </el-table-column>
</el-table>

则第二列的单元格行会自动拆分为多行，每行显示一个爱好。你可以使用 `v-for` 循环渲染每个爱好。

相关问题

el-table prop为数组时，所对应属性的单元格行拆分为多行其他属性合并为一行

可以通过使用 `span-method` 属性来实现 el-table 中 prop 为数组时，对应属性的单元格行拆分为多行，同时其他属性合并为一行。具体步骤如下：

1. 在 el-table 中添加 `span-method` 属性，并设置一个方法名，例如 `handleSpanMethod`。

2. 在 Vue 实例中定义 `handleSpanMethod` 方法，该方法接收两个参数，分别为当前单元格所在行的数据对象和当前单元格的 column 对象。在该方法中，可以通过判断当前单元格所在列的 prop 是否为数组来决定是否需要合并单元格。

示例代码如下：

<template>
  <el-table :data="tableData" style="width: 100%" :span-method="handleSpanMethod">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="hobby" label="爱好"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, hobby: ['游泳', '跑步'] },
        { name: '李四', age: 20, hobby: ['唱歌', '跳舞', '画画'] },
        { name: '王五', age: 22, hobby: ['读书'] },
      ],
    };
  },

  methods: {
    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 判断当前单元格所在列的 prop 是否为数组
      if (column.prop === 'hobby') {
        // 计算当前单元格需要跨越的行数
        const rowspan = row.hobby.length;
        // 返回一个包含 rowspan 和 colspan 属性的对象
        return { rowspan, colspan: 1 };
      }
    },
  },
};
</script>

在上述示例代码中，我们通过判断当前单元格所在列的 prop 是否为 `hobby` 来决定是否需要合并单元格。如果是，则计算当前单元格需要跨越的行数，返回一个包含 `rowspan` 和 `colspan` 属性的对象，其中 `colspan` 属性默认为 1，表示不需要合并列。这样就可以实现 el-table 中 prop 为数组时，对应属性的单元格行拆分为多行，同时其他属性合并为一行的效果。

el-table prop为对象数组时，所对应属性的单元格行拆分为多行其他属性合并为一行

如果你想要在 `el-table` 的单元格中以多行展示某个属性，而其他属性只需要展示一行，可以使用 `scoped slot` 的方式来自定义单元格的展示方式。

具体做法是，在表格中指定 `prop` 为对象数组的列，同时在该列上使用 `scoped slot`，并在 `scoped slot` 中自定义单元格的展示方式。在 `scoped slot` 中，你可以根据当前行的数据来判断该行的某个属性是否需要进行多行展示，然后分别处理该属性的多行展示和其他属性的一行展示。

以下是一个示例代码，其中假设表格数据中有一个 `content` 属性需要进行多行展示，而其他属性只需展示一行。示例中使用了 `v-if` 来判断当前行数据中 `content` 属性的行数，并添加了对应的 `rowspan` 属性来控制该属性的多行展示。

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="content" label="内容">
    <template slot-scope="scope">
      <td v-if="scope.row.content.length > 1" :rowspan="scope.row.content.length">{{ scope.row.content[0] }}</td>
      <td v-else>{{ scope.row.content[0] }}</td>
    </template>
  </el-table-column>
</el-table>

在上述示例中，假设 `tableData` 数组中的每个对象都有一个 `content` 属性，该属性是一个数组，其中的每个元素需要在单元格中进行多行展示。在 `scoped slot` 中，我们首先使用 `v-if` 来判断当前行数据中 `content` 属性的长度是否大于 1，如果是，则说明该属性需要进行多行展示，我们就在第一行单元格中添加了对应的 `rowspan` 属性。在第二行及之后的单元格中，我们只需要展示该属性的对应值即可。如果 `content` 属性的长度为 1，则说明该属性只需要展示一行，我们直接将该属性的值渲染到单元格中即可。