引入 table-merge

package-lock.json

@@ -1353,6 +1353,27 @@
       "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
       "dev": true
     },
+    "@table-merge/core": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@table-merge/core/-/core-1.0.2.tgz",
+      "integrity": "sha512-d3SNb7oWDxiKcL1Jfox6j5pvsbDgWjfgrrWe/cjl7DU5mKwrhhiwgJuaSq4YtpkMfwx7SJ7RGG32I2u1dYgTNQ=="
+    },
+    "@table-merge/element-plus": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@table-merge/element-plus/-/element-plus-1.0.1.tgz",
+      "integrity": "sha512-hrT11aBMG6kdDr8pnZEmO0qTcmTmVPlw7oKfAkmw8tEb4qPePsS5qepLxKJFJjUwUwBU6PsG87w3uB0OMAopfg==",
+      "requires": {
+        "@table-merge/core": "1.0.2"
+      }
+    },
+    "@table-merge/element-ui": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@table-merge/element-ui/-/element-ui-1.0.1.tgz",
+      "integrity": "sha512-jUk+e0uMA7qEpXiDq0iLDooXHfHsd7mGO+rFDr1sFKl4BJ++TNcGyUyNom7rGns+Uv+y5dqilXk4QX64aBhFPA==",
+      "requires": {
+        "@table-merge/element-plus": "1.0.1"
+      }
+    },
     "@types/glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmmirror.com/@types/glob/-/glob-7.2.0.tgz",

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@table-merge/element-ui": "^1.0.1",
     "core-js": "^3.6.4",
     "element-ui": "^2.15.12",
     "vue": "^2.6.11"
@@ -35,10 +36,10 @@
     },
     "rules": {
       "generator-star-spacing": "off",
-      "no-tabs":"off",
-      "no-unused-vars":"off",
-      "no-console":"off",
-      "no-irregular-whitespace":"off",
+      "no-tabs": "off",
+      "no-unused-vars": "off",
+      "no-console": "off",
+      "no-irregular-whitespace": "off",
       "no-debugger": "off"
     }
   },

src/App5.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <h1 class="title">@table-merge/element-ui</h1>
+
+    <h2 class="box">合并行</h2>
+
+    <div class="box">
+      <p>多行合并</p>
+      <pre>tableMergeElement(data)</pre>
+      <el-table :data="data" :span-method="tableMergeElement(data)" border>
+        <el-table-column v-for="col in columns" :key="col.prop" v-bind="col" />
+      </el-table>
+    </div>
+
+    <div class="box">
+      <p>从第二行开始合并</p>
+      <pre>tableMergeElement(data, { range: { row: 2 } })</pre>
+      <el-table :data="data" :span-method="tableMergeElement(data, { range: { row: 2 } })" border>
+        <el-table-column v-for="col in columns" :key="col.prop" v-bind="col" />
+      </el-table>
+    </div>
+
+    <div class="box">
+      <p>合并 1 - 3 行，不包含第 3 行</p>
+      <pre>tableMergeElement(data, { range: { row: [1, 3] } })</pre>
+      <el-table :data="data" :span-method="tableMergeElement(data, { range: { row: [1, 3] } })" border>
+        <el-table-column v-for="col in columns" :key="col.prop" v-bind="col" />
+      </el-table>
+    </div>
+
+    <div class="box">
+      <p>从第一行和第二例开始合并</p>
+      <pre>tableMergeElement(data, { range: { row: 1, col: 2 } })</pre>
+      <el-table :data="data" :span-method="tableMergeElement(data, { range: { row: 1, col: 2 } })" border>
+        <el-table-column v-for="col in columns" :key="col.prop" v-bind="col" />
+      </el-table>
+    </div>
+
+    <h2 class="box">合并列</h2>
+
+    <div class="box">
+      <p>多列合并</p>
+      <pre>tableMergeElement(data, { spanType: 'colSpan' })</pre>
+      <el-table :data="data" :span-method="tableMergeElement(data, { spanType: 'colSpan' })" border>
+        <el-table-column v-for="col in columns" :key="col.prop" v-bind="col" />
+      </el-table>
+    </div>
+
+    <div class="box">
+      <p>从第二列开始合并</p>
+      <pre>tableMergeElement(data, { range: { col: 2 }, spanType: 'colSpan' })</pre>
+      <el-table :data="data" :span-method="tableMergeElement(data, { range: { col: 2 }, spanType: 'colSpan' })" border>
+        <el-table-column v-for="col in columns" :key="col.prop" v-bind="col" />
+      </el-table>
+    </div>
+
+    <div class="box">
+      <p>合并 1 - 3 列，不包含第 3 列</p>
+      <pre>tableMergeElement(data, { range: { col: [1, 3] }, spanType: 'colSpan' })</pre>
+      <el-table :data="data" :span-method="tableMergeElement(data, { range: { col: [1, 3] }, spanType: 'colSpan' })" border>
+        <el-table-column v-for="col in columns" :key="col.prop" v-bind="col" />
+      </el-table>
+    </div>
+
+    <div class="box">
+      <p>从第一行和第二例开始合并</p>
+      <pre>tableMergeElement(data, { range: { row: 1, col: 2 }, spanType: 'colSpan' })</pre>
+      <el-table :data="data" :span-method="tableMergeElement(data, { range: { row: 1, col: 2 }, spanType: 'colSpan' })" border>
+        <el-table-column v-for="col in columns" :key="col.prop" v-bind="col" />
+      </el-table>
+    </div>
+
+    <h2 class="box">筛选指定列</h2>
+    <div class="box">
+      <p>比如后端返回很多数据，而只渲染某些数据的时候，这时候可以指定没列要渲染的 keys</p>
+      <pre>
+const data = [
+  { id: 1, a: 8, b: 8, c: 2, d: 0 },
+  { id: 2, a: 2, b: 4, c: 4, d: 5 },
+  { id: 3, a: 8, b: 8, c: 4, d: 4 },
+  { id: 4, a: 5, b: 8, c: 4, d: 1 },
+  { id: 5, a: 5, b: 3, c: 3, d: 2 }
+];
+
+const columns = [
+  { prop: 'a', label: 'A列', align: 'center' },
+  { prop: 'b', label: 'B列', align: 'center' },
+  { prop: 'c', label: 'C列', align: 'center' },
+  { prop: 'd', label: 'D列', align: 'center' }
+];
+
+tableMergeElement(data, { keys: ['a', 'b', 'c', 'd'], spanType: 'colSpan' })
+</pre
+>
+      <el-table :data="data" :span-method="tableMergeElement(data, { keys: ['a', 'b', 'c', 'd'], spanType: 'colSpan' })" border>
+        <el-table-column v-for="col in columns.filter((col) => col.prop !== 'id')" :key="col.prop" v-bind="col" />
+      </el-table>
+    </div>
+
+    <br />
+  </div>
+</template>
+
+<script>
+import tableMergeElement from '@table-merge/element-ui';
+export default {
+  data() {
+    return {
+      data: [
+        { id: 1, a: 8, b: 8, c: 2, d: 0 },
+        { id: 2, a: 2, b: 4, c: 4, d: 5 },
+        { id: 3, a: 8, b: 8, c: 4, d: 4 },
+        { id: 4, a: 5, b: 8, c: 4, d: 1 },
+        { id: 5, a: 5, b: 3, c: 3, d: 2 }
+      ],
+      columns: [
+        { prop: 'id', label: 'ID', align: 'center' },
+        { prop: 'a', label: 'A列', align: 'center' },
+        { prop: 'b', label: 'B列', align: 'center' },
+        { prop: 'c', label: 'C列', align: 'center' },
+        { prop: 'd', label: 'D列', align: 'center' }
+      ]
+    };
+  },
+  methods: {
+    tableMergeElement
+  }
+};
+</script>
+
+<style scoped>
+
+</style>

src/Vue5.vue

@@ -137,7 +137,7 @@
         },
         methods: {
             addClass({row,column,rowIndex,columnIndex}){
-                console.log('addClass',row,column,rowIndex,columnIndex)
+                // console.log('addClass',row,column,rowIndex,columnIndex)
                 if(columnIndex === 1){
                     return 'cell-green';
                 }
@@ -166,11 +166,19 @@
                 if ([0, 1, 2, 3, 4].includes(columnIndex)) {
                     const _row = this.rowspan[rowIndex];
                     const _col = _row > 0 ? 1 : 0;  // 如果这一行隐藏了，这列也隐藏
+                    console.log('spanMethod',_row,_col)
                     return {
                         rowspan: _row,
                         colspan: _col
                     };
                 }
+              // eslint-disable-next-line no-empty
+                if ([5,6,7,8,9,10].includes(columnIndex) && [1].includes(rowIndex) ) {
+                  return {
+                    rowspan: 2,
+                    colspan: 1
+                  };
+                }
             },
             convertTableData() {
                 let data = this.tableData;

src/main.js

@@ -11,10 +11,11 @@ import Vue from 'vue';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import App from './Vue5.vue';
+import App5 from "@/App5";
 
 Vue.use(ElementUI);
 
 new Vue({
   el: '#app',
-  render: h => h(App)
+  render: h => h(App5)
 });