正文

1. 源码

  2. <template>
  3.   <div>
  4. <!--   指定 count 取默认属性   -->
  5.     <el-table
  6.       :data="tableData"
  7.       :span-method="arraySpanMethod"
  8.       border
  9.       style="width: 100%">
  10.       <el-table-column
  11.         prop="id"
  12.         label="ID"
  13.         width="180">
  14.       </el-table-column>
  15.       <el-table-column
  16.         prop="name"
  17.         label="姓名">
  18.       </el-table-column>
  19.       <el-table-column
  20.         prop="amount1"
  21.         sortable
  22.         label="数值 1">
  23.       </el-table-column>
  24.       <el-table-column
  25.         prop="amount2"
  26.         sortable
  27.         label="数值 2">
  28.       </el-table-column>
  29.       <el-table-column
  30.         prop="amount3"
  31.         sortable
  32.         label="数值 3">
  33.       </el-table-column>
  34.     </el-table>
  35. <hr />
  36. <!--   指定 props   -->
  37.     <el-table
  38.       :data="tableData"
  39.       :span-method="arraySpanMethod2"
  40.       border
  41.       style="width: 100%">
  42.       <el-table-column
  43.         prop="id"
  44.         label="ID"
  45.         width="180">
  46.       </el-table-column>
  47.       <el-table-column
  48.         prop="name"
  49.         label="姓名">
  50.       </el-table-column>
  51.       <el-table-column
  52.         prop="amount1"
  53.         sortable
  54.         label="数值 1">
  55.       </el-table-column>
  56.       <el-table-column
  57.         prop="amount2"
  58.         sortable
  59.         label="数值 2">
  60.       </el-table-column>
  61.       <el-table-column
  62.         prop="amount3"
  63.         sortable
  64.         label="数值 3">
  65.       </el-table-column>
  66.     </el-table>
  68.   </div>
  69. </template>
  72. <script>
  73. export default {
  74.   data() {
  75.     return {
  76.       tableData: [
  77.         {
  78.           id: "12987122",
  79.           name: "王小1虎",
  80.           amount1: "234",
  81.           amount2: "3.2",
  82.           amount3: 10
  83.         },
  84.         {
  85.           id: "12987121",
  86.           name: "王小虎",
  87.           amount1: "324",
  88.           amount2: "4.43",
  89.           amount3: 12
  90.         },
  91.         {
  92.           id: "12987125",
  93.           name: "王小虎",
  94.           amount1: "621",
  95.           amount2: "1.9",
  96.           amount3: 9
  97.         },
  98.         {
  99.           id: "12987125",
  100.           name: "王小21虎",
  101.           amount1: "621",
  102.           amount2: "2.2",
  103.           amount3: 17
  104.         },
  105.         {
  106.           id: "12987126",
  107.           name: "王小2虎",
  108.           amount1: "539",
  109.           amount2: "2.2",
  110.           amount3: 15
  111.         }
  112.       ],
  113.       mergeResult: [],
  114.       mergeResult2: [],
  115.       props: ["name", "amount2"]
  116.     };
  117.   },
  118.   created() {
  119.     // 指定 count 取默认属性
  120.     this.mergeResult = this.mergeColumnCells(this.tableData, 2);
  121.     // 指定 props
  122.     this.mergeResult2 = this.mergeColumnCells(this.tableData, 0, this.props);
  124.     console.log(this.mergeResult);
  125.     console.log(this.mergeResult2);
  126.   },
  127.   methods: {
  128.     /**
  129.      * 多列合并单元格，可以指定某列，下面的 count 和 props 参数，虽然都是非必须的，但是至少得保证有一个
  130.      * @param {Array} data 需要处理的数据
  131.      * @param {Number} count 非必须参数：需要合并单元格的列的总数量（满足从初始第一列至连续的 count 列的条件）
  132.      * @param {Array} props 非必须参数：需要合并单元格的数据列对应的属性列表，示例：['id','name']
  133.      * @returns {Array} 储存嵌套的每一列需要合并单元格的合并的格数，示例：[[1,1,2,0,1],[1,2,0,1,1]]
  134.      * 两种不同方式的调用示例：
  135.      * 指定 count 取默认属性：this.mergeResult = this.mergeColumnCells(this.tableData, 2);
  136.      * 指定 props：this.mergeResult = this.mergeColumnCells(this.tableData, 0, this.props);
  137.      * 完整的在线示例地址 [element table 多列合并单元格，可以指定某列](https://codepen.io/sunxiaochuan/pen/wvoOXzG)
  138.      */
  139.     mergeColumnCells(data, count, props) {
  140.       if (data && data.length && (count || props)) {
  141.         // 先获取到需要合并的属性列表
  142.         props = props || [];
  143.         // 不存在的话就依照 count 字段开始取默认名称
  144.         if (!props.length) {
  145.           for (const key in data[0]) {
  146.             if (data[0].hasOwnProperty(key)) {
  147.               props.push(key);
  148.             }
  149.             if (props.length === count) {
  150.               break;
  151.             }
  152.           }
  153.         }
  155.         let saveData = [];
  156.         for (let index = 0; index < props.length; index++) {
  157.           const prop = props[index];
  158.           // 设置初始化值
  159.           saveData[index] = [];
  160.           let dataList = saveData[index];
  161.           // 标记属性值重复的位置
  162.           let position;
  164.           // 数据计算
  165.           for (let i = 0; i < data.length; i++) {
  166.             const element = data[i];
  167.             // 逻辑：默认的第一条 i === 0 数据将初始化单元格数量为 1，并将标记位置初始为 0；从第二条 i === 1 数据开始与上一条数据做属性比较：一致的话被标记位置的单元格 += 1，相应的当前单元格需要置为 0；否则当前单元格为 1，并重新将当前的索引设置为初始标记位置
  168.             if (i === 0) {
  169.               dataList.push(1);
  170.               position = 0;
  171.             } else {
  172.               // 判断与上一条数据对应的属性值是否一致，一致的话被标记位置的单元格 += 1，并设置当前的单元格为 0；否则当前单元格为 1，并重新将当前的索引设置为初始标记位置
  173.               const prev = data[i - 1];
  174.               if (element[prop] === prev[prop]) {
  175.                 dataList[position] += 1;
  176.                 dataList.push(0);
  177.               } else {
  178.                 dataList.push(1);
  179.                 position = i;
  180.               }
  181.             }
  182.           }
  183.         }
  185.         return saveData;
  186.       } else {
  187.         return [];
  188.       }
  189.     },
  190.     arraySpanMethod({ row, column, rowIndex, columnIndex }) {
  191.       if (columnIndex < 2) {
  192.         const _row = this.mergeResult[columnIndex][rowIndex];
  193.         return [_row, 1];
  194.       }
  195.     },
  196.     //         指定 props
  197.     arraySpanMethod2({ row, column, rowIndex, columnIndex }) {
  198.       const index = this.props.indexOf(column.property);
  199.       if (index != -1) {
  200.         const _row = this.mergeResult2[index][rowIndex];
  201.         return [_row, 1];
  202.       }
  203.     }
  204.   }
  205. }
  206. </script>

在线地址

codepen 在线示例：element table 多列合并单元格，可以指定某列