定制软件开发Element UI 的 table 单元格合并

定制软件开发项目中遇到表格单元格定制软件开发合并的需求，定制软件开发在此记录整个解决过程。

定制软件开发项目使用的是 Element UI，定制软件开发表格使用的是 table 组件。Element UI 的 table 定制软件开发表格组件中对单元格进行合并，需要使用 table 组件的 span-method 属性。

先看一张成果图（完整代码放在末尾）：

解决思路：

1、格式化后台返回的数据（根据实际数据格式处理）

项目后台返回的数据格式为，这里做简化展示：

  1. [
  2.   {
  3.     'column1': '111',
  4.     'column2': '222',
  5.     'column3': '333',
  6.     'children1': [
  7.       {
  8.         'column6': 666,
  9.         'column4': '4440',
  10.         'column5': '5550',
  11.         'children2': [
  12.           {
  13.             'column7': '77701',
  14.             'column8': '88801',
  15.             'column9': '99901'
  16.           }
  17.         ]
  18.       }
  19.     ]
  20.   }
  21. ]

需要先将树结构数据转为一维数组：

  1. // table 表格数据初始化处理，将树结构数据转为一维数组
  2.     handleData(data, parentId) {
  3.       data.map((res, index) => {
  4.         var obj = {
  5.           id: parentId
  6.         }
  7.         for (const key in res) {
  8.           const isarr = Object.values(res).find((age) => {
  9.             return Array.isArray(age)
  10.           })
  11.           if (isarr) {
  12.             if (Array.isArray(res[key])) {
  13.               for (let i = 0; i < res[key].length; i++) {
  14.                 Object.assign(obj, res[key][i])
  15.                 data.push(obj)
  16.                 res[key].splice(i, 1)
  17.                 if (res[key].length === 0) {
  18.                   data.splice(index, 1)
  19.                 }
  20.                 this.handleData(data, parentId)
  21.               }
  22.             } else {
  23.               Object.assign(obj, { [key]: res[key] })
  24.             }
  25.           }
  26.         }
  27.       })
  28.       return data
  29.     }

因为后台返回的数据里没有唯一标识符，所以需要单独添加一个唯一标识表示转换为一维数组的数据是出自同一组树结构里。故此处在展开时单独加了一个 id 属性，用来代替唯一标识。如果后台返回的数据格式就是一个一维数组，可跳过数据格式化步骤。

2、在 data 中定义数据，需要合并几列就定义几个数组和索引

  1.   data() {
  2.     return {
  3.       tableData: [],
  4.       // 合并单元格
  5.       column1Arr: [], // column1
  6.       column1Index: 0, // column1索引
  7.       column2Arr: [], // column2
  8.       column2Index: 0, // column2索引
  9.       column3Arr: [], // column3
  10.       column3Index: 0, // column3索引
  11.       column4Arr: [], // column4
  12.       column4Index: 0, // column4
  13.       column5Arr: [], // column5
  14.       column5Index: 0, // column5索引
  15.       column6Arr: [], // column6
  16.       column6Index: 0 // column6索引
  17.     }
  18.   }

 3、定义合并函数

以第一行为基准，一层层对比，参数 data 就是格式化以后的表格数据，以每个数据里的唯一标识 id 作为合并的参照字段：

  1.     // 初始化合并行数组
  2.     mergeInit() {
  3.       this.column1Arr = [] // column1
  4.       this.column1Index = 0 // column1索引
  5.       this.column2Arr = [] // column2
  6.       this.column2Index = 0 // column2索引
  7.       this.column3Arr = [] // column3
  8.       this.column3Index = 0 // column3索引
  9.       this.column4Arr = [] // column4
  10.       this.column4Index = 0 // column4索引
  11.       this.column5Arr = [] // column5
  12.       this.column5Index = 0 // column5索引
  13.       this.column6Arr = [] // column6
  14.       this.column6Index = 0 // column6索引
  15.     },
  16.     // 合并表格
  17.     mergeTable(data) {
  18.       this.mergeInit()
  19.       if (data.length > 0) {
  20.         for (var i = 0; i < data.length; i++) {
  21.           if (i === 0) {
  22.             // 第一行必须存在，以第一行为基准
  23.             this.column1Arr.push(1) // column1
  24.             this.column1Index = 0
  25.  
  26.             this.column2Arr.push(1) // column2
  27.             this.column2Index = 0
  28.  
  29.             this.column3Arr.push(1) // column3
  30.             this.column3Index = 0
  31.  
  32.             this.column4Arr.push(1) // column4
  33.             this.column4Index = 0
  34.  
  35.             this.column5Arr.push(1) // column5
  36.             this.column5Index = 0
  37.  
  38.             this.column6Arr.push(1) // column6
  39.             this.column6Index = 0
  40.           } else {
  41.             // 判断当前元素与上一元素是否相同
  42.             // column1
  43.             if (
  44.               data[i].column1 === data[i - 1].column1 &&
  45.               data[i].id === data[i - 1].id
  46.             ) {
  47.               this.column1Arr[this.column1Index] += 1
  48.               this.column1Arr.push(0)
  49.             } else {
  50.               this.column1Arr.push(1)
  51.               this.column1Index = i
  52.             }
  53.  
  54.             // column2
  55.             if (
  56.               data[i].column2 === data[i - 1].column2 &&
  57.               data[i].id === data[i - 1].id
  58.             ) {
  59.               this.column2Arr[this.column2Index] += 1
  60.               this.column2Arr.push(0)
  61.             } else {
  62.               this.column2Arr.push(1)
  63.               this.column2Index = i
  64.             }
  65.  
  66.             // column3
  67.             if (
  68.               data[i].column3 === data[i - 1].column3 &&
  69.               data[i].id === data[i - 1].id
  70.             ) {
  71.               this.column3Arr[this.column3Index] += 1
  72.               this.column3Arr.push(0)
  73.             } else {
  74.               this.column3Arr.push(1)
  75.               this.column3Index = i
  76.             }
  77.  
  78.             // column4
  79.             if (
  80.               data[i].column4 === data[i - 1].column4 &&
  81.               data[i].id === data[i - 1].id
  82.             ) {
  83.               this.column4Arr[this.column4Index] += 1
  84.               this.column4Arr.push(0)
  85.             } else {
  86.               this.column4Arr.push(1)
  87.               this.column4Index = i
  88.             }
  89.  
  90.             // column5
  91.             if (
  92.               data[i].column5 === data[i - 1].column5 &&
  93.               data[i].column4 === data[i - 1].column4 &&
  94.               data[i].id === data[i - 1].id
  95.             ) {
  96.               this.column5Arr[this.column5Index] += 1
  97.               this.column5Arr.push(0)
  98.             } else {
  99.               this.column5Arr.push(1)
  100.               this.column5Index = i
  101.             }
  102.  
  103.             // column6
  104.             if (
  105.               data[i].column6 === data[i - 1].column6 &&
  106.               data[i].column4 === data[i - 1].column4 &&
  107.               data[i].id === data[i - 1].id
  108.             ) {
  109.               this.column6Arr[this.column6Index] += 1
  110.               this.column6Arr.push(0)
  111.             } else {
  112.               this.column6Arr.push(1)
  113.               this.column6Index = i
  114.             }
  115.           }
  116.         }
  117.       }
  118.     },

注意，同一组数据里可能会有多个  children1 或者 children2，这时合并的时候会有多个条件进行判断：

 

 4、table 组件属性 span-method 的单元格合并方法：

  1.     handleSpanMethod({ row, column, rowIndex, columnIndex }) {
  2.       if (columnIndex === 0 || columnIndex === 1) {
  3.         // 第一列 column1
  4.         const _row_1 = this.column1Arr[rowIndex]
  5.         const _col_1 = _row_1 > 0 ? 1 : 0
  6.         return {
  7.           rowspan: _row_1,
  8.           colspan: _col_1
  9.         }
  10.       } else if (columnIndex === 2) {
  11.         // 第二列 column2
  12.         const _row_2 = this.column2Arr[rowIndex]
  13.         const _col_2 = _row_2 > 0 ? 1 : 0
  14.         return {
  15.           rowspan: _row_2,
  16.           colspan: _col_2
  17.         }
  18.       } else if (columnIndex === 3) {
  19.         // 第三列 column3
  20.         const _row_2 = this.column3Arr[rowIndex]
  21.         const _col_2 = _row_2 > 0 ? 1 : 0
  22.         return {
  23.           rowspan: _row_2,
  24.           colspan: _col_2
  25.         }
  26.       } else if (columnIndex === 4) {
  27.         // 第四列 column4
  28.         const _row_2 = this.column4Arr[rowIndex]
  29.         const _col_2 = _row_2 > 0 ? 1 : 0
  30.         return {
  31.           rowspan: _row_2,
  32.           colspan: _col_2
  33.         }
  34.       } else if (columnIndex === 5) {
  35.         // 第五列 column5
  36.         const _row_2 = this.column5Arr[rowIndex]
  37.         const _col_2 = _row_2 > 0 ? 1 : 0
  38.         return {
  39.           rowspan: _row_2,
  40.           colspan: _col_2
  41.         }
  42.       } else if (columnIndex === 6) {
  43.         // 第六列 column6
  44.         const _row_2 = this.column6Arr[rowIndex]
  45.         const _col_2 = _row_2 > 0 ? 1 : 0
  46.         return {
  47.           rowspan: _row_2,
  48.           colspan: _col_2
  49.         }
  50.       }
  51.     }

至此，整个单元格合并就完成了！

如果觉得写得还不错，还请点赞支持，感谢感谢感谢！！！

完整代码：

  1. <template>
  2.   <div class="table-wrap">
  3.     <el-table
  4.       :data="tableData"
  5.       :span-method="handleSpanMethod"
  6.       :cell-style="{ background: '#FFFFFF' }"
  7.       border
  8.       style="width: 100%"
  9.     >
  10.       <el-table-column prop="id" label="序号" align="center" width="80">
  11.         <template slot-scope="scope">
  12.           {{ scope.row.id + 1 }}
  13.         </template>
  14.       </el-table-column>
  15.       <el-table-column prop="column1" label="column1" align="center" />
  16.       <el-table-column prop="column2" label="column2" align="center" />
  17.       <el-table-column prop="column3" label="column3" align="center" />
  18.       <el-table-column prop="column4" label="column4" align="center" />
  19.       <el-table-column prop="column5" label="column5" align="center" />
  20.       <el-table-column prop="column6" label="column6" align="center" />
  21.       <el-table-column prop="column7" label="column7" align="center" />
  22.       <el-table-column prop="column8" label="column8" align="center" />
  23.       <el-table-column prop="column9" label="column9" align="center" />
  24.     </el-table>
  25.   </div>
  26. </template>
  27.  
  28. <script>
  29. export default {
  30.   name: 'CellMerge',
  31.   data() {
  32.     return {
  33.       tableData: [],
  34.       // 合并单元格
  35.       column1Arr: [], // column1
  36.       column1Index: 0, // column1索引
  37.       column2Arr: [], // column2
  38.       column2Index: 0, // column2索引
  39.       column3Arr: [], // column3
  40.       column3Index: 0, // column3索引
  41.       column4Arr: [], // column4
  42.       column4Index: 0, // column4
  43.       column5Arr: [], // column5
  44.       column5Index: 0, // column5索引
  45.       column6Arr: [], // column6
  46.       column6Index: 0 // column6索引
  47.     }
  48.   },
  49.   mounted() {
  50.     this.initTableData()
  51.   },
  52.   methods: {
  53.     // 初始化表格数据
  54.     initTableData() {
  55.       const newTableData = [
  56.         {
  57.           'column1': '111',
  58.           'column2': '222',
  59.           'column3': '333',
  60.           'children1': [
  61.             {
  62.               'column6': 666,
  63.               'column4': '4440',
  64.               'column5': '5550',
  65.               'children2': [
  66.                 {
  67.                   'column7': '77701',
  68.                   'column8': '88801',
  69.                   'column9': '99901'
  70.                 },
  71.                 {
  72.                   'column7': '77702',
  73.                   'column8': '88802',
  74.                   'column9': '99902'
  75.                 },
  76.                 {
  77.                   'column7': '77703',
  78.                   'column8': '88803',
  79.                   'column9': '99903'
  80.                 }
  81.               ]
  82.             },
  83.             {
  84.               'column6': 666,
  85.               'column4': '4441',
  86.               'column5': '5551',
  87.               'children2': [
  88.                 {
  89.                   'column7': '77711',
  90.                   'column8': '88811',
  91.                   'column9': '99911'
  92.                 }
  93.               ]
  94.             },
  95.             {
  96.               'column6': 666,
  97.               'column4': '4442',
  98.               'column5': '5552',
  99.               'children2': [
  100.                 {
  101.                   'column7': '77721',
  102.                   'column8': '88821',
  103.                   'column9': '99921'
  104.                 },
  105.                 {
  106.                   'column7': '77722',
  107.                   'column8': '88822',
  108.                   'column9': '99922'
  109.                 }
  110.               ]
  111.             }
  112.           ]
  113.         },
  114.         {
  115.           'column1': '111',
  116.           'column2': '222',
  117.           'column3': '333',
  118.           'children1': [
  119.             {
  120.               'column6': 666,
  121.               'column4': '4440',
  122.               'column5': '5550',
  123.               'children2': [
  124.                 {
  125.                   'column7': '77701',
  126.                   'column8': '88801',
  127.                   'column9': '99901'
  128.                 }
  129.               ]
  130.             },
  131.             {
  132.               'column6': 666,
  133.               'column4': '4441',
  134.               'column5': '5551',
  135.               'children2': [
  136.                 {
  137.                   'column7': '77711',
  138.                   'column8': '88811',
  139.                   'column9': '99911'
  140.                 },
  141.                 {
  142.                   'column7': '77712',
  143.                   'column8': '88812',
  144.                   'column9': '99912'
  145.                 }
  146.               ]
  147.             }
  148.           ]
  149.         },
  150.         {
  151.           'column1': '111',
  152.           'column2': '222',
  153.           'column3': '333',
  154.           'children1': [
  155.             {
  156.               'column6': 666,
  157.               'column4': '4440',
  158.               'column5': '5550',
  159.               'children2': [
  160.                 {
  161.                   'column7': '77701',
  162.                   'column8': '88801',
  163.                   'column9': '99901'
  164.                 },
  165.                 {
  166.                   'column7': '77702',
  167.                   'column8': '88802',
  168.                   'column9': '99902'
  169.                 },
  170.                 {
  171.                   'column7': '77703',
  172.                   'column8': '88803',
  173.                   'column9': '99903'
  174.                 }
  175.               ]
  176.             },
  177.             {
  178.               'column6': 666,
  179.               'column4': '4441',
  180.               'column5': '5551',
  181.               'children2': [
  182.                 {
  183.                   'column7': '77711',
  184.                   'column8': '88811',
  185.                   'column9': '99911'
  186.                 }
  187.               ]
  188.             }
  189.           ]
  190.         }
  191.       ]
  192.       this.tableData = []
  193.       newTableData.map((res, index) => {
  194.         const parentId = index
  195.         this.tableData.push.apply(
  196.           this.tableData,
  197.           this.handleData([res], parentId)
  198.         )
  199.       })
  200.       this.mergeTable(this.tableData)
  201.     },
  202.     // table 表格数据初始化处理，将树结构数据转为一维数组
  203.     handleData(data, parentId) {
  204.       data.map((res, index) => {
  205.         var obj = {
  206.           id: parentId
  207.         }
  208.         for (const key in res) {
  209.           const isarr = Object.values(res).find((age) => {
  210.             return Array.isArray(age)
  211.           })
  212.           if (isarr) {
  213.             if (Array.isArray(res[key])) {
  214.               for (let i = 0; i < res[key].length; i++) {
  215.                 Object.assign(obj, res[key][i])
  216.                 data.push(obj)
  217.                 res[key].splice(i, 1)
  218.                 if (res[key].length === 0) {
  219.                   data.splice(index, 1)
  220.                 }
  221.                 this.handleData(data, parentId)
  222.               }
  223.             } else {
  224.               Object.assign(obj, { [key]: res[key] })
  225.             }
  226.           }
  227.         }
  228.       })
  229.       return data
  230.     },
  231.     // 初始化合并行数组
  232.     mergeInit() {
  233.       this.column1Arr = [] // column1
  234.       this.column1Index = 0 // column1索引
  235.       this.column2Arr = [] // column2
  236.       this.column2Index = 0 // column2索引
  237.       this.column3Arr = [] // column3
  238.       this.column3Index = 0 // column3索引
  239.       this.column4Arr = [] // column4
  240.       this.column4Index = 0 // column4索引
  241.       this.column5Arr = [] // column5
  242.       this.column5Index = 0 // column5索引
  243.       this.column6Arr = [] // column6
  244.       this.column6Index = 0 // column6索引
  245.     },
  246.     // 合并表格
  247.     mergeTable(data) {
  248.       this.mergeInit()
  249.       if (data.length > 0) {
  250.         for (var i = 0; i < data.length; i++) {
  251.           if (i === 0) {
  252.             // 第一行必须存在，以第一行为基准
  253.             this.column1Arr.push(1) // column1
  254.             this.column1Index = 0
  255.  
  256.             this.column2Arr.push(1) // column2
  257.             this.column2Index = 0
  258.  
  259.             this.column3Arr.push(1) // column3
  260.             this.column3Index = 0
  261.  
  262.             this.column4Arr.push(1) // column4
  263.             this.column4Index = 0
  264.  
  265.             this.column5Arr.push(1) // column5
  266.             this.column5Index = 0
  267.  
  268.             this.column6Arr.push(1) // column6
  269.             this.column6Index = 0
  270.           } else {
  271.             // 判断当前元素与上一元素是否相同
  272.             // column1
  273.             if (
  274.               data[i].column1 === data[i - 1].column1 &&
  275.               data[i].id === data[i - 1].id
  276.             ) {
  277.               this.column1Arr[this.column1Index] += 1
  278.               this.column1Arr.push(0)
  279.             } else {
  280.               this.column1Arr.push(1)
  281.               this.column1Index = i
  282.             }
  283.  
  284.             // column2
  285.             if (
  286.               data[i].column2 === data[i - 1].column2 &&
  287.               data[i].id === data[i - 1].id
  288.             ) {
  289.               this.column2Arr[this.column2Index] += 1
  290.               this.column2Arr.push(0)
  291.             } else {
  292.               this.column2Arr.push(1)
  293.               this.column2Index = i
  294.             }
  295.  
  296.             // column3
  297.             if (
  298.               data[i].column3 === data[i - 1].column3 &&
  299.               data[i].id === data[i - 1].id
  300.             ) {
  301.               this.column3Arr[this.column3Index] += 1
  302.               this.column3Arr.push(0)
  303.             } else {
  304.               this.column3Arr.push(1)
  305.               this.column3Index = i
  306.             }
  307.  
  308.             // column4
  309.             if (
  310.               data[i].column4 === data[i - 1].column4 &&
  311.               data[i].id === data[i - 1].id
  312.             ) {
  313.               this.column4Arr[this.column4Index] += 1
  314.               this.column4Arr.push(0)
  315.             } else {
  316.               this.column4Arr.push(1)
  317.               this.column4Index = i
  318.             }
  319.  
  320.             // column5
  321.             if (
  322.               data[i].column5 === data[i - 1].column5 &&
  323.               data[i].column4 === data[i - 1].column4 &&
  324.               data[i].id === data[i - 1].id
  325.             ) {
  326.               this.column5Arr[this.column5Index] += 1
  327.               this.column5Arr.push(0)
  328.             } else {
  329.               this.column5Arr.push(1)
  330.               this.column5Index = i
  331.             }
  332.  
  333.             // column6
  334.             if (
  335.               data[i].column6 === data[i - 1].column6 &&
  336.               data[i].column4 === data[i - 1].column4 &&
  337.               data[i].id === data[i - 1].id
  338.             ) {
  339.               this.column6Arr[this.column6Index] += 1
  340.               this.column6Arr.push(0)
  341.             } else {
  342.               this.column6Arr.push(1)
  343.               this.column6Index = i
  344.             }
  345.           }
  346.         }
  347.       }
  348.     },
  349.     handleSpanMethod({ row, column, rowIndex, columnIndex }) {
  350.       if (columnIndex === 0 || columnIndex === 1) {
  351.         // 第一列 column1
  352.         const _row_1 = this.column1Arr[rowIndex]
  353.         const _col_1 = _row_1 > 0 ? 1 : 0
  354.         return {
  355.           rowspan: _row_1,
  356.           colspan: _col_1
  357.         }
  358.       } else if (columnIndex === 2) {
  359.         // 第二列 column2
  360.         const _row_2 = this.column2Arr[rowIndex]
  361.         const _col_2 = _row_2 > 0 ? 1 : 0
  362.         return {
  363.           rowspan: _row_2,
  364.           colspan: _col_2
  365.         }
  366.       } else if (columnIndex === 3) {
  367.         // 第三列 column3
  368.         const _row_2 = this.column3Arr[rowIndex]
  369.         const _col_2 = _row_2 > 0 ? 1 : 0
  370.         return {
  371.           rowspan: _row_2,
  372.           colspan: _col_2
  373.         }
  374.       } else if (columnIndex === 4) {
  375.         // 第四列 column4
  376.         const _row_2 = this.column4Arr[rowIndex]
  377.         const _col_2 = _row_2 > 0 ? 1 : 0
  378.         return {
  379.           rowspan: _row_2,
  380.           colspan: _col_2
  381.         }
  382.       } else if (columnIndex === 5) {
  383.         // 第五列 column5
  384.         const _row_2 = this.column5Arr[rowIndex]
  385.         const _col_2 = _row_2 > 0 ? 1 : 0
  386.         return {
  387.           rowspan: _row_2,
  388.           colspan: _col_2
  389.         }
  390.       } else if (columnIndex === 6) {
  391.         // 第六列 column6
  392.         const _row_2 = this.column6Arr[rowIndex]
  393.         const _col_2 = _row_2 > 0 ? 1 : 0
  394.         return {
  395.           rowspan: _row_2,
  396.           colspan: _col_2
  397.         }
  398.       }
  399.     }
  400.   }
  401. }
  402. </script>
  403. <style lang="scss" scoped>
  404.   .table-wrap {
  405.     width: 100%;
  406.     height: 100%;
  407.     padding: 20px;
  408.   }
  409. </style>

 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发