Vue实现数据表格合并列rowspan效果

下面是Vue实现数据表格合并列rowspan的攻略：

一、准备工作

1. 安装Vue.js和引入外部表格插件element-ui。
2. 准备好需要展示的表格数据。

二、实现合并功能

实现合并的核心是在表格渲染之后，对表格单元格进行合并操作。可以通过计算表格中相邻单元格的值是否相同来实现合并，如果相同，则将当前单元格上下跨度设置为0，否则就将上一次开始合并的单元格的跨度合并到对应单元格中。

下面是一个示例：

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: '22', address: '上海市' },
        { name: '李四', age: '22', address: '北京市' },
        { name: '王五', age: '18', address: '广州市' },
        { name: '赵六', age: '18', address: '深圳市' },
      ]
    }
  },
  methods: {
    formatter(row, column, value, index) {
      let prevRow = this.tableData[index - 1];
      if (prevRow && prevRow.age === value) { // 判断前一个单元格的值是否相同
        return '';
      } else {
        let rowspan = 1;
        for (let i = index + 1; i < this.tableData.length; i++) {
          if (this.tableData[i].age === value) {
            rowspan++;
          } else {
            break;
          }
        }
        return { rowspan: rowspan, colspan: 1 };
      }
    }
  }
}
</script>

这个示例中，通过在列属性中使用formatter函数来实现对对应列内容进行格式化。在formatter函数中，根据上一个单元格的值来判断当前单元格是否需要合并，并且计算当前单元格应该跨越的行数。最后返回一个对象，需要在对应单元格中设置rowspan和colspan属性。

三、例如

下面提供两个实际应用的示例：

示例1

我们需要实现一个课程表，展示学生的上课时间和上课内容：

时间	课程
上午1节	英语
上午2节	数学
下午1节	体育
下午2节	物理

需要将上午1节和上午2节合并为一行，下午1节和下午2节合并为一行。以下是示例代码：

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="time"
      label="时间">
    </el-table-column>
    <el-table-column
      prop="course"
      label="课程"
      :formatter="formatter">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { time: '上午1节', course: '英语' },
        { time: '上午2节', course: '数学' },
        { time: '下午1节', course: '体育' },
        { time: '下午2节', course: '物理' },
      ]
    }
  },
  methods: {
    formatter(row, column, value, index) {
      let prevRow = this.tableData[index - 1];
      if (prevRow && this.isSameSlot(prevRow.time, row.time)) { // 判断是否同一时间段
        return '';
      } else {
        let rowspan = 1;
        for (let i = index + 1; i < this.tableData.length; i++) {
          if (this.isSameSlot(this.tableData[i].time, row.time)) {
            rowspan++;
          } else {
            break;
          }
        }
        return { rowspan: rowspan, colspan: 1 };
      }
    },
    isSameSlot(prev, current) {
      return prev.substring(0, 2) === current.substring(0, 2);
    }
  }
}
</script>

示例2

我们需要实现一个资产清单列表，展示各种资产的详细信息，需要将相同资产类型的多行合并为一行。以下是示例代码：

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="name"
      label="名称">
    </el-table-column>
    <el-table-column
      prop="type"
      label="类型"
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="price"
      label="价格">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'MacBook Pro', type: '电脑', price: '10000' },
        { name: 'ThinkPad', type: '电脑', price: '8000' },
        { name: 'iPhone', type: '手机', price: '5000' },
        { name: 'iPad', type: '平板', price: '4000' },
        { name: '华为Mate', type: '手机', price: '4500' },
      ]
    }
  },
  methods: {
    formatter(row, column, value, index) {
      let prevRow = this.tableData[index - 1];
      if (prevRow && prevRow.type === value) { // 判断是否同一类型
        return '';
      } else {
        let rowspan = 1;
        for (let i = index + 1; i < this.tableData.length; i++) {
          if (this.tableData[i].type === value) {
            rowspan++;
          } else {
            break;
          }
        }
        return { rowspan: rowspan, colspan: 1 };
      }
    }
  }
}
</script>

以上就是Vue实现数据表格合并列rowspan的完整攻略。