iview 表格合并示例

以下是一个 iview 表格合并示例：

<template>
  <div>
    <i-table :columns="columns" :data="tableData" :row-span-method="rowSpanMethod"></i-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      columns: [
        {
          title: '姓名',
          key: 'name',
          rowspan: 2
        },
        {
          title: '年龄',
          key: 'age',
          rowspan: 2
        },
        {
          title: '地址',
          key: 'address',
          rowspan: 2
        },
        {
          title: '性别',
          key: 'gender',
          rowspan: 2
        },
        {
          title: '国籍',
          key: 'nation',
          rowspan: 2
        },
        {
          title: '考试科目',
          key: 'subject',
          colspan: 3
        },
        {
          title: '总分',
          key: 'total',
          rowspan: 2
        }
      ],
      tableData: [
        {
          name: '张三',
          age: 18,
          address: '北京市海淀区',
          gender: '男',
          nation: '中国',
          subject: '语文',
          score: 80,
          total: 240
        },
        {
          name: '张三',
          age: 18,
          address: '北京市海淀区',
          gender: '男',
          nation: '中国',
          subject: '数学',
          score: 80,
          total: 240
        },
        {
          name: '张三',
          age: 18,
          address: '北京市海淀区',
          gender: '男',
          nation: '中国',
          subject: '英语',
          score: 80,
          total: 240
        },
        {
          name: '李四',
          age: 20,
          address: '上海市浦东新区',
          gender: '女',
          nation: '中国',
          subject: '语文',
          score: 90,
          total: 270
        },
        {
          name: '李四',
          age: 20,
          address: '上海市浦东新区',
          gender: '女',
          nation: '中国',
          subject: '数学',
          score: 90,
          total: 270
        },
        {
          name: '李四',
          age: 20,
          address: '上海市浦东新区',
          gender: '女',
          nation: '中国',
          subject: '英语',
          score: 90,
          total: 270
        }
      ]
    }
  },
  methods: {
    rowSpanMethod (row, column, rowIndex, columnIndex) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 7) {
        if (rowIndex % 3 === 0) {
          return 3
        } else {
          return 0
        }
      }
    }
  }
}
</script>

这是一个简单的表格，其中有两个需要合并的单元格。在 `columns` 中，使用了 `rowspan` 和 `colspan` 属性进行单元格合并。在 `tableData` 中，每个人的三项成绩都是分开的，但是在渲染表格时，使用了 `rowSpanMethod` 方法进行了单元格合并。