1、源代码

  1. let rowspanArray
  3. function spanRow({ row, column, rowIndex, columnIndex }, data, option) {
  4.   if (rowIndex === 0 && columnIndex === 0) {
  5.     computeSpanRow(data, option)
  6.   }
  8.   if (is(option, columnIndex)) {
  9.     const rowspan = rowspanArray[columnIndex][rowIndex]
  10.     const colspan = rowspan > 0 ? 1 : 0
  12.     return {
  13.       rowspan: rowspan,
  14.       colspan: colspan
  15.     }
  16.   }
  18.   return {
  19.     rowspan: 1,
  20.     colspan: 1
  21.   }
  22. }
  24. function computeSpanRow(data, option) {
  25.   rowspanArray = []
  27.   let tempRow= []
  28.   for (let i = 0; i < data.length; i++) {
  29.     for (let j = 0; j < option.length; j++) {
  30.       let index = option[j].index;
  31.       let field = option[j].field;
  33.       if (i === 0) {
  34.         tempRow[index] = 0
  35.         rowspanArray[index] = []
  36.         rowspanArray[index].push(1)
  38.       } else {
  39.         if (data[i][field] === data[i - 1][field]) {
  40.           rowspanArray[index][tempRow[index]] += 1
  41.           rowspanArray[index].push(0)
  43.         } else {
  44.           rowspanArray[index].push(1)
  45.           tempRow[index] = i
  46.         }
  47.       }
  48.     }
  49.   }
  50. }
  52. function is(option, index) {
  53.   for (let i = 0; i < option.length; i++) {
  54.     if (option[i].index === index) {
  55.       return true
  56.     }
  57.   }
  58.   return false
  59. }
  61. export { spanRow }

2、示例

  1. <template>
  2.   <el-table :data="data" :span-method="onSpanMethod">
  3.     <el-table-column prop="field1" label="field1"> </el-table-column>
  4.     <el-table-column prop="field2" label="field2"> </el-table-column>
  5.     <el-table-column prop="field3" label="field3"> </el-table-column>
  6.   </el-table>
  7. </template>
  9. <script>
  10. import { spanRow } from "element-ui-table-span-method";
  12. export default {
  13.   data() {
  14.     return {
  15.       data: [
  16.         { field1: "A", field2: "a", field3: "1" },
  17.         { field1: "A", field2: "a", field3: "2" },
  18.         { field1: "A", field2: "b", field3: "3" }
  19.       ],
  20.       option: [
  21.         { index: 0, field: "field1" },
  22.         { index: 1, field: "field2" }
  23.       ]
  24.     };
  25.   },
  26.   methods: {
  27.     onSpanMethod({ row, column, rowIndex, columnIndex }) {
  28.       return spanRow(
  29.         { row, column, rowIndex, columnIndex },
  30.         this.data,
  31.         this.option
  32.       );
  33.     }
  34.   }
  35. };
  36. </script>

参见：https://github.com/h69/element-ui-table-span-method