devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue element ui 表格有相同数据合并单元格_element ui table 根据参数名是否相同合并单元格

作者：繁依Fanyi0 | 2024-02-27 18:09:33

赞

踩

element ui table 根据参数名是否相同合并单元格

先看效果  

 

前提是你的数据是扁平的数据因为要根据上下数据是否一样才合并的  如果是子级数据需要改一下数据格式了

下面是数据的样式

  1. tableData: [{
  2.           id: '1',
  3.           name: '王小虎',
  4.           amount1: '165',
  5.           amount2: '3.2',
  6.           amount3: 10
  7.         }, {
  8.           id: '1',
  9.           name: '王小虎',
  10.           amount1: '162',
  11.           amount2: '4.43',
  12.           amount3: 12
  13.         }, {
  14.           id: '1',
  15.           name: '王we虎',
  16.           amount1: '621',
  17.           amount2: '1.9',
  18.           amount3: 9
  19.         }, {
  20.           id: '2',
  21.           name: '王we虎',
  22.           amount1: '621',
  23.           amount2: '2.2',
  24.           amount3: 17
  25.         }, {
  26.           id: '3',
  27.           name: '王小虎',
  28.           amount1: '621',
  29.           amount2: '4.1',
  30.           amount3: 15
  31.         }],

 

 合并单元格的重点属性就是 :summary-method="" 这个是关键

  1. <el-table ref="tableRef" show-summary :summary-method="getSummaries" :span-method="handleSpanMethod"  :data="listData"  border style="width: 100%; margin-top: 5px">
  2.       <el-table-column label="No." type="index" align="center" width="50"></el-table-column>
  3.       <el-table-column prop="checkResult" label="Check result"> </el-table-column>
  4.       <el-table-column prop="standardChineseName" label="Standard chinese name"> </el-table-column>
  5.       <el-table-column prop="ingredientInciCtfaName" label="Ingredient INCI(CTFA) name"> </el-table-column>
  6.       <el-table-column prop="RMInFormula" label="RM in formula(%)"> </el-table-column>
  7.       <el-table-column prop="ingredientInRM" label="Ingredient in RM(%)"> </el-table-column>
  8.       <el-table-column prop="ingredientInFormula" label="Ingredient in formula(%)"> </el-table-column>
  9.       <el-table-column prop="purposeOfUse" label="Purpose of use"> </el-table-column>
  10.       <el-table-column prop="templateUrl5" label="New RM" align="center" width="100"> </el-table-column>
  11.     </el-table>
  1. data() {
  2.     return {
  3.       listData: [],
  4.  
  5.       // 合并单元格
  6.       column1Arr: [], // column1
  7.       column1Index: 0, // column1索引
  8.  
  9.       column2Arr: [], // column2
  10.       column2Index: 0, // column2索引
  11.  
  12.       column3Arr: [], // column3
  13.       column3Index: 0, // column3索引
  14.  
  15.       column4Arr: [], // column4
  16.       column4Index: 0, // column4索引
  17.  
  18.       column5Arr: [], // column5
  19.       column5Index: 0, // column5索引
  20.  
  21.       column6Arr: [], // column6
  22.       column6Index: 0, // column6索引
  23.  
  24.       column7Arr: [], // column7
  25.       column7Index: 0, // column7索引
  26.     }
  27.   },
  1. mergeTable(data) {
  2.       if (data.length > 0) {
  3.         for (var i = 0; i < data.length; i++) {
  4.           if (i === 0) {
  5.             // 第一行必须存在，以第一行为基准  合并的数量根据直接需求改
  6.             this.column1Arr.push(1) // column1
  7.             this.column1Index = 0
  8.             this.column2Arr.push(1) // column2
  9.             this.column2Index = 0
  10.  
  11.             this.column3Arr.push(1) // column3
  12.             this.column3Index = 0
  13.  
  14.             this.column4Arr.push(1) // column4
  15.             this.column4Index = 0
  16.  
  17.             this.column5Arr.push(1) // column5
  18.             this.column5Index = 0
  19.  
  20.             this.column6Arr.push(1) // column6
  21.             this.column6Index = 0
  22.  
  23.             this.column7Arr.push(1) // column7
  24.             this.column7Index = 0
  25.           } else {
  26.             // 判断当前元素与上一元素是否相同   
  27.             // 我是根据第一个数据合并后续才可以合并 
  28.             //如果是 根据当前表格的前一列可以在每一个 column1++   后面添加上前一个表格的列            
  29.             // 如果是只要相同就合并那就每个column 里面的条件直接当前列就可以了
  30.     
  31.             // column1
  32.             if (data[i].checkResult === data[i - 1].checkResult) {
  33.               this.column1Arr[this.column1Index] += 1
  34.               this.column1Arr.push(0)
  35.             } else {
  36.               this.column1Arr.push(1)
  37.               this.column1Index = i
  38.             }
  39.  
  40.             // column2
  41.               if (data[i].standardChineseName === data[i - 1].standardChineseName && data[i].checkResult === data[i - 1].checkResult) {
  42.                 this.column2Arr[this.column2Index] += 1
  43.                 this.column2Arr.push(0)
  44.               } else {
  45.                 this.column2Arr.push(1)
  46.                 this.column2Index = i
  47.               }
  48.  
  49.               // column3
  50.               if (data[i].ingredientInciCtfaName === data[i - 1].ingredientInciCtfaName && data[i].checkResult === data[i - 1].checkResult) {
  51.                 this.column3Arr[this.column3Index] += 1
  52.                 this.column3Arr.push(0)
  53.               } else {
  54.                 this.column3Arr.push(1)
  55.                 this.column3Index = i
  56.               }
  57.  
  58.               // column4
  59.               if (data[i].RMInFormula === data[i - 1].RMInFormula && data[i].checkResult === data[i - 1].checkResult) {
  60.                 this.column4Arr[this.column4Index] += 1
  61.                 this.column4Arr.push(0)
  62.               } else {
  63.                 this.column4Arr.push(1)
  64.                 this.column4Index = i
  65.               }
  66.  
  67.               // column5
  68.               if (data[i].ingredientInRM === data[i - 1].ingredientInRM && data[i].checkResult === data[i - 1].checkResult) {
  69.                 this.column5Arr[this.column5Index] += 1
  70.                 this.column5Arr.push(0)
  71.               } else {
  72.                 this.column5Arr.push(1)
  73.                 this.column5Index = i
  74.               }
  75.  
  76.               // column6
  77.               if (data[i].ingredientInFormula === data[i - 1].ingredientInFormula && data[i].checkResult === data[i - 1].checkResult) {
  78.                 this.column6Arr[this.column6Index] += 1
  79.                 this.column6Arr.push(0)
  80.               } else {
  81.                 this.column6Arr.push(1)
  82.                 this.column6Index = i
  83.               }
  84.  
  85.               // column7
  86.               if (data[i].purposeOfUse === data[i - 1].purposeOfUse && data[i].checkResult === data[i - 1].checkResult) {
  87.                 this.column7Arr[this.column7Index] += 1
  88.                 this.column7Arr.push(0)
  89.               } else {
  90.                 this.column7Arr.push(1)
  91.                 this.column7Index = i
  92.               }
  93.           }
  94.         }
  95.       }
  96.     },
  97.     
  98.     //我这里是在表格的第二列开始合并因为第一列是 序号 不可以合并  从第一个开始合并就把 下表
  99.     //改为0  columnIndex === 0
  100.     handleSpanMethod({ rowIndex, columnIndex }) {
  101.       if (columnIndex === 1) {
  102.         // 第二列 column2
  103.         const _row_1 = this.column1Arr[rowIndex]
  104.         const _col_1 = _row_1 > 0 ? 1 : 0
  105.         return {
  106.           rowspan: _row_1,
  107.           colspan: _col_1,
  108.         }
  109.       } 
  110.       else if (columnIndex === 2) {
  111.         // 第三列 column3
  112.         const _row_2 = this.column2Arr[rowIndex]
  113.         const _col_2 = _row_2 > 0 ? 1 : 0
  114.         return {
  115.           rowspan: _row_2,
  116.           colspan: _col_2,
  117.         }
  118.       } else if (columnIndex === 3) {
  119.         // 第四列 column4
  120.         const _row_3 = this.column3Arr[rowIndex]
  121.         const _col_3 = _row_3 > 0 ? 1 : 0
  122.         return {
  123.           rowspan: _row_3,
  124.           colspan: _col_3,
  125.         }
  126.       } else if (columnIndex === 4) {
  127.         // 第五列 column5
  128.         const _row_4 = this.column4Arr[rowIndex]
  129.         const _col_4 = _row_4 > 0 ? 1 : 0
  130.         return {
  131.           rowspan: _row_4,
  132.           colspan: _col_4,
  133.         }
  134.       } else if (columnIndex === 5) {
  135.         // 第六列 column6
  136.         const _row_5 = this.column5Arr[rowIndex]
  137.         const _col_5 = _row_5 > 0 ? 1 : 0
  138.         return {
  139.           rowspan: _row_5,
  140.           colspan: _col_5,
  141.         }
  142.       } else if (columnIndex === 6) {
  143.         // 第七列 column7
  144.         const _row_6 = this.column6Arr[rowIndex]
  145.         const _col_6 = _row_6 > 0 ? 1 : 0
  146.         return {
  147.           rowspan: _row_6,
  148.           colspan: _col_6,
  149.         }
  150.       } else if (columnIndex === 7) {
  151.         // 第八列 column8
  152.         const _row_7 = this.column7Arr[rowIndex]
  153.         const _col_7 = _row_7 > 0 ? 1 : 0
  154.         return {
  155.           rowspan: _row_7,
  156.           colspan: _col_7,
  157.         }
  158.       }
  159.     },
  1. //调取接口获取数据
  2. getList() {
  3.       const prams = {
  4.         taskId: this.taskId,
  5.         formulaId: this.formulaId
  6.       }
  7.       this.$http({
  8.         headers: {
  9.           'Content-Type': 'application/json',
  10.         },
  11.         method: 'post',
  12.         url: '/123123',
  13.         data: prams,
  14.       })
  15.       .then(res=>{
  16.         this.listData = res.data.records //给data变量赋值
  17.         this.mergeTable(this.listData)//合并单元格传入数据
  18.       })
  19.       //清空之前的数据  不清空 表格数据就会乱套
  20.       this.column1Arr = []
  21.       this.column1Index = 0
  22.       this.column2Arr = []
  23.       this.column2Index = 0
  24.       this.column3Arr = []
  25.       this.column3Index = 0
  26.       this.column4Arr = []
  27.       this.column4Index = 0
  28.       this.column5Arr = []
  29.       this.column5Index = 0
  30.       this.column6Arr = []
  31.       this.column6Index = 0
  32.       this.column7Arr = []
  33.       this.column7Index = 0
  34.     },

完整代码

  1. <template>
  2.   <div>
  3.     <el-table ref="tableRef" show-summary :summary-method="getSummaries" :span-method="handleSpanMethod"  :data="listData"  border style="width: 100%; margin-top: 5px">
  4.       <el-table-column label="No." type="index" align="center" width="50"></el-table-column>
  5.       <el-table-column prop="checkResult" label="Check result"> </el-table-column>
  6.       <el-table-column prop="standardChineseName" label="Standard chinese name"> </el-table-column>
  7.       <el-table-column prop="ingredientInciCtfaName" label="Ingredient INCI(CTFA) name"> </el-table-column>
  8.       <el-table-column prop="RMInFormula" label="RM in formula(%)"> </el-table-column>
  9.       <el-table-column prop="ingredientInRM" label="Ingredient in RM(%)"> </el-table-column>
  10.       <el-table-column prop="ingredientInFormula" label="Ingredient in formula(%)"> </el-table-column>
  11.       <el-table-column prop="purposeOfUse" label="Purpose of use"> </el-table-column>
  12.       <el-table-column prop="templateUrl5" label="New RM" align="center" width="100"> </el-table-column>
  13.     </el-table>
  14.   </div>
  15. </template>
  16.   
  17. <script>
  18. export default {
  19.   components: {},
  20.   data() {
  21.     return {
  22.       listData: [],
  23.  
  24.       // 合并单元格
  25.       column1Arr: [], // column1
  26.       column1Index: 0, // column1索引
  27.  
  28.       column2Arr: [], // column2
  29.       column2Index: 0, // column2索引
  30.  
  31.       column3Arr: [], // column3
  32.       column3Index: 0, // column3索引
  33.  
  34.       column4Arr: [], // column4
  35.       column4Index: 0, // column4索引
  36.  
  37.       column5Arr: [], // column5
  38.       column5Index: 0, // column5索引
  39.  
  40.       column6Arr: [], // column6
  41.       column6Index: 0, // column6索引
  42.  
  43.       column7Arr: [], // column7
  44.       column7Index: 0, // column7索引
  45.     }
  46.   },
  47.   computed: {},
  48.   created() {
  49.     this.getList()
  50.   },
  51.   mounted() {
  52.     
  53.   },
  54.   methods: {
  55.     getList() {
  56.       const prams = {
  57.         taskId: this.taskId,
  58.         formulaId: this.formulaId
  59.       }
  60.       this.$http({
  61.         headers: {
  62.           'Content-Type': 'application/json',
  63.         },
  64.         method: 'post',
  65.         url: '/1123123123',
  66.         data: prams,
  67.       })
  68.       .then(res=>{
  69.         this.listData = res.data.records//给data中的变量赋值 把res.data.records换成自己
  70. //的据接口 更改一下数据的字段 便可以直接使用了  
  71.         this.mergeTable(this.listData)//合并单元格传入数据
  72.       })
  73.       //清空之前的数据
  74.       this.column1Arr = []
  75.       this.column1Index = 0
  76.       this.column2Arr = []
  77.       this.column2Index = 0
  78.       this.column3Arr = []
  79.       this.column3Index = 0
  80.       this.column4Arr = []
  81.       this.column4Index = 0
  82.       this.column5Arr = []
  83.       this.column5Index = 0
  84.       this.column6Arr = []
  85.       this.column6Index = 0
  86.       this.column7Arr = []
  87.       this.column7Index = 0
  88.     },
  89.     mergeTable(data) {
  90.       if (data.length > 0) {
  91.         for (var i = 0; i < data.length; i++) {
  92.           if (i === 0) {
  93.             // 第一行必须存在，以第一行为基准
  94.             this.column1Arr.push(1) // column1
  95.             this.column1Index = 0
  96.             this.column2Arr.push(1) // column2
  97.             this.column2Index = 0
  98.  
  99.             this.column3Arr.push(1) // column3
  100.             this.column3Index = 0
  101.  
  102.             this.column4Arr.push(1) // column4
  103.             this.column4Index = 0
  104.  
  105.             this.column5Arr.push(1) // column5
  106.             this.column5Index = 0
  107.  
  108.             this.column6Arr.push(1) // column6
  109.             this.column6Index = 0
  110.  
  111.             this.column7Arr.push(1) // column7
  112.             this.column7Index = 0
  113.           } else {
  114.             // 判断当前元素与上一元素是否相同
  115.             // column1
  116.             if (data[i].checkResult === data[i - 1].checkResult) {
  117.               this.column1Arr[this.column1Index] += 1
  118.               this.column1Arr.push(0)
  119.             } else {
  120.               this.column1Arr.push(1)
  121.               this.column1Index = i
  122.             }
  123.  
  124.             // column2
  125.               if (data[i].standardChineseName === data[i - 1].standardChineseName && data[i].checkResult === data[i - 1].checkResult) {
  126.                 this.column2Arr[this.column2Index] += 1
  127.                 this.column2Arr.push(0)
  128.               } else {
  129.                 this.column2Arr.push(1)
  130.                 this.column2Index = i
  131.               }
  132.  
  133.               // column3
  134.               if (data[i].ingredientInciCtfaName === data[i - 1].ingredientInciCtfaName && data[i].checkResult === data[i - 1].checkResult) {
  135.                 this.column3Arr[this.column3Index] += 1
  136.                 this.column3Arr.push(0)
  137.               } else {
  138.                 this.column3Arr.push(1)
  139.                 this.column3Index = i
  140.               }
  141.  
  142.               // column4
  143.               if (data[i].RMInFormula === data[i - 1].RMInFormula && data[i].checkResult === data[i - 1].checkResult) {
  144.                 this.column4Arr[this.column4Index] += 1
  145.                 this.column4Arr.push(0)
  146.               } else {
  147.                 this.column4Arr.push(1)
  148.                 this.column4Index = i
  149.               }
  150.  
  151.               // column5
  152.               if (data[i].ingredientInRM === data[i - 1].ingredientInRM && data[i].checkResult === data[i - 1].checkResult) {
  153.                 this.column5Arr[this.column5Index] += 1
  154.                 this.column5Arr.push(0)
  155.               } else {
  156.                 this.column5Arr.push(1)
  157.                 this.column5Index = i
  158.               }
  159.  
  160.               // column6
  161.               if (data[i].ingredientInFormula === data[i - 1].ingredientInFormula && data[i].checkResult === data[i - 1].checkResult) {
  162.                 this.column6Arr[this.column6Index] += 1
  163.                 this.column6Arr.push(0)
  164.               } else {
  165.                 this.column6Arr.push(1)
  166.                 this.column6Index = i
  167.               }
  168.  
  169.               // column7
  170.               if (data[i].purposeOfUse === data[i - 1].purposeOfUse && data[i].checkResult === data[i - 1].checkResult) {
  171.                 this.column7Arr[this.column7Index] += 1
  172.                 this.column7Arr.push(0)
  173.               } else {
  174.                 this.column7Arr.push(1)
  175.                 this.column7Index = i
  176.               }
  177.           }
  178.         }
  179.       }
  180.     },
  181.  
  182.     handleSpanMethod({ rowIndex, columnIndex }) {
  183.       if (columnIndex === 1) {
  184.         // 第二列 column2
  185.         const _row_1 = this.column1Arr[rowIndex]
  186.         const _col_1 = _row_1 > 0 ? 1 : 0
  187.         return {
  188.           rowspan: _row_1,
  189.           colspan: _col_1,
  190.         }
  191.       } 
  192.       else if (columnIndex === 2) {
  193.         // 第三列 column3
  194.         const _row_2 = this.column2Arr[rowIndex]
  195.         const _col_2 = _row_2 > 0 ? 1 : 0
  196.         return {
  197.           rowspan: _row_2,
  198.           colspan: _col_2,
  199.         }
  200.       } else if (columnIndex === 3) {
  201.         // 第四列 column4
  202.         const _row_3 = this.column3Arr[rowIndex]
  203.         const _col_3 = _row_3 > 0 ? 1 : 0
  204.         return {
  205.           rowspan: _row_3,
  206.           colspan: _col_3,
  207.         }
  208.       } else if (columnIndex === 4) {
  209.         // 第五列 column5
  210.         const _row_4 = this.column4Arr[rowIndex]
  211.         const _col_4 = _row_4 > 0 ? 1 : 0
  212.         return {
  213.           rowspan: _row_4,
  214.           colspan: _col_4,
  215.         }
  216.       } else if (columnIndex === 5) {
  217.         // 第六列 column6
  218.         const _row_5 = this.column5Arr[rowIndex]
  219.         const _col_5 = _row_5 > 0 ? 1 : 0
  220.         return {
  221.           rowspan: _row_5,
  222.           colspan: _col_5,
  223.         }
  224.       } else if (columnIndex === 6) {
  225.         // 第七列 column7
  226.         const _row_6 = this.column6Arr[rowIndex]
  227.         const _col_6 = _row_6 > 0 ? 1 : 0
  228.         return {
  229.           rowspan: _row_6,
  230.           colspan: _col_6,
  231.         }
  232.       } else if (columnIndex === 7) {
  233.         // 第八列 column8
  234.         const _row_7 = this.column7Arr[rowIndex]
  235.         const _col_7 = _row_7 > 0 ? 1 : 0
  236.         return {
  237.           rowspan: _row_7,
  238.           colspan: _col_7,
  239.         }
  240.       }
  241.     }
  242. }
  243. </script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/155099
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号