iview table 表格合并单元格

一、如图所示

二、实现方式

表格用提供的span-method属性

<template>
    <Table ref="table" border :span-method="handleSpan" :row-key="true" :columns="tableColumns" :data="tableData"
      no-data-text="暂无数据">
    </Table>
</template>
<script>
export default {
  data() {
    return {
      tableColumns: [
        {
          title: '姓名',
          key: 'name',
          align: 'center',
          minWidth: 85,
        },
        {
          title: '年龄',
          key: 'age',
          align: 'center',
          minWidth: 85,
        },
        {
          title: '爱好',
          key: 'hobby',
          align: 'center',
          minWidth: 85,
        },
        {
          title: '等级',
          key: 'level',
          align: 'center',
          minWidth: 85,
        },
        {
          title: '年份',
          key: 'year',
          align: 'center',
          minWidth: 85,
        },
        {
          title: '地址',
          key: 'address',
          align: 'center',
          minWidth: 85,
        },
        {
          title: '电话',
          key: 'phone',
          align: 'center',
          minWidth: 85,
        },

      ],
      tableData: [],
    };
  },
  methods: {
    handleSpan({ row, column, rowIndex, columnIndex }) {
      // 爱好 【序号2】、等级【序号3】、年份【序号4】 是多行的
      if (columnIndex < 2 || columnIndex > 4) {
        // 其余的 保留并合并成一行
        if (row._columnStatus == 'first') {
          return {
            rowspan: row.hobbyList.length,  // 爱好数量
            colspan: 1
          };
        } else if (row._columnStatus == 'next') {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    getData() {
      let origin = [
        {
          id: 1,
          name: 'lili',
          age: 18,
          hobbyList: [
            {
              hobby: '篮球',
              level: 'A',
              year: 1
            },
            {
              hobby: '足球',
              level: 'B',
              year: 2
            },
            {
              hobby: '羽毛球',
              level: 'C',
              year: 1.5
            }
          ],
          address: '山东',
          phone: '1978977767'
        },
        {
          id: 2,
          name: 'aazzz',
          age: 16,
          hobbyList: [],
          address: '新疆',
          phone: '13456444355'
        },
        {
          id: 3,
          name: 'ouz',
          age: 17,
          hobbyList: [{
            hobby: '唱歌',
            level: 'A',
            year: 3
          }],
          address: '新疆',
          phone: '13456444355'
        },
        {
          id: 4,
          name: 'eva',
          age: 19,
          hobbyList: [{
            hobby: '跳舞',
            level: 'B',
            year: 2
          },
          {
            hobby: '弹琴',
            level: 'A',
            year: 1
          }],
          address: '新疆',
          phone: '13456444355'
        }
      ];
      this.setData(origin);
    },
    setData(origin) {
      let tableData = [];
      origin.forEach(item => {
        if (item.hobbyList && item.hobbyList.length) {
          // 将爱好列表展开成多行
          item.hobbyList.forEach((it, i) => {
            tableData.push({
              ...item,
              ...it,
              _columnStatus: i == 0 ? 'first' : 'next',
              _rowIndex: i
            });
          });
        } else {
          tableData.push({
            ...item,
            _columnStatus: '',
            _rowIndex: 0
          });
        }
      });
      this.tableData = tableData;
    }
  },
  mounted() {
    this.getData();
  }
};
</script>
<style scoped>
</style>