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

el-table合计行单元格合并、单元格样式修改_el-table show-summary

作者：盐析白兔 | 2024-02-19 08:36:35

赞

踩

el-table show-summary

1、目标效果

        源码放在下面，复制粘贴即可

        （1）合计行放在头部，且字体颜色变粗、合计行背景色变粗

        （2）合计行年龄算平均值且字体颜色为绿色，财产算总数且字体颜色为红色 

2、原理

2.1、el-table中show-summary 合计行默认放在尾部

        加上如下css即可：父选择器  /deep/ 子选择器实现样式穿透

  1. /* 合计行位置修改开始 */
  2. .el-table {
  3.     display: flex;
  4.     flex-direction: column;
  5. }
  6.  
  7. .el-table /deep/ .el-table__body-wrapper {
  8.     order: 1;
  9. }
  10.  
  11. /* 合计行位置修改结束*/

2.2、合计行整体样式修改

  1. /* 合计行整体样式修改开始 */
  2. .el-table /deep/ .el-table__footer-wrapper tbody td {
  3.     background: black;
  4.     color: white;
  5.     font-weight: bolder;
  6. }
  7.  
  8. /* 合计行整体样式修改结束*/

2.3、合计方法：:summary-method="getSummaries"

  1.  // 合计行方法
  2.         getSummaries(param) {
  3.             const { columns, data } = param;
  4.             const sums = [];
  5.             columns.forEach((column, index) => {
  6.                 if (column.property == 'date') {
  7.                     sums[index] = '总价';
  8.                     return;
  9.                 }
  10.  
  11.                 // values是每一列的数据是一个数组
  12.                 const values = data.map(item => Number(item[column.property]));
  13.                 
  14.                 // 数字列才进行合计计算
  15.                 if (!values.every(value => isNaN(value))) {
  16.                     // 对values进行一个累加操作，累加那些非NAN的值
  17.                     const total = values.reduce((prev, curr) => {
  18.                         const value = Number(curr);
  19.                         if (!isNaN(value)) {
  20.                             return prev + curr;
  21.                         } else {
  22.                             return prev;
  23.                         }
  24.                     }, 0);
  25.  
  26.                     // 年龄计算平均值
  27.                     if (column.property == 'age') {
  28.                         sums[index] = total / data.length
  29.                     }
  30.  
  31.                     // 财产计算总数
  32.                     if (column.property == 'money') {
  33.                         sums[index] = total}
  34.                     }
  35.  
  36.                 }
  37.             });
  38.  
  39.             // 将合计结果返回，是一个数组，每个位置的值与表格的列一一对应
  40.             return sums
  41.         }

        columns展示每一列的信息，是一个对象数组

        data为每一行的信息，也是一个对象数组，不算上合计行哦！

        sums为合计行，在typescript中是一个元祖，即数组里面可以存放不同类型的元素

  

2.4、合计行单元格样式

        2.4.1、css方式

  1. .el-table /deep/ .el-table__footer-wrapper tbody td:nth-child(3) {
  2.     color: lightgreen;
  3.     font-weight: bolder;
  4. }
  5.  
  6. .el-table /deep/ .el-table__footer-wrapper tbody td:nth-child(4) {
  7.     color: red;
  8.     font-weight: bolder;
  9. }

        缺点：需要手动计算每列的位置，一旦列的位置发生变化，不好维护

        2.4.2、jsx方式

        合计行中返回jsx，生成一个VNode，动态生成样式

  1.  // 年龄计算平均值（绿色）
  2.                     if (column.property == 'age') {
  3.                         sums[index] = <span class={'green'}>{total / data.length}</span>
  4.                     }
  5.  
  6.                     // 财产计算总数（红色）
  7.                     if (column.property == 'money') {
  8.                         sums[index] = <span class={'red'}>{total}</span>
  9.                     }
  1. .red {
  2.     color: red;
  3.     font-weight: bolder;
  4. }
  5.  
  6. .green {
  7.     color: lightgreen;
  8.     font-weight: bolder;
  9. }

        

        sums返回VNode

         

2.5、合计行单元格合并

        2.5.1、别人博客的方式（会报错）        

  1.  watch: {
  2.         表格数据: {
  3.             immediate: true,
  4.             handler() {
  5.                     const tds = document.querySelectorAll('#table .el-table__footer-wrapper tr>td');
  6.                     tds[0].colSpan = 2;
  7.                     tds[0].style.textAlign = 'center'
  8.                     tds[1].style.display = 'none'
  9.             }
  10.         }
  11.     },

        2.5.2、elementUI中合并行的方法

        :span-method是不包括合计行的

        2.5.3、本篇文章的方法 （推荐）

                在方法一的基础上改造：

  1.  watch: {
  2.         tableData: {
  3.             immediate: true,
  4.             handler() {
  5.                 setTimeout(() => {
  6.                     const tds = document.querySelectorAll('#table .el-table__footer-wrapper tr>td');
  7.                     tds[0].colSpan = 2;
  8.                     tds[0].style.textAlign = 'center'
  9.                     tds[1].style.display = 'none'
  10.                 }, 0)
  11.             }
  12.         }
  13.     },

                为什么这样却可以？              

        Vue 推荐使用 template 来创建 HTML。但不是真实的DOM节点。vue会先利用对象中的render 函数，生成虚拟DOM节点并挂载，挂载的真实DOM是进行异步渲染的，并且在修改完状态后也是异步的方式进行渲染。代码中将document.querySelectorAll操作定义为同步任务，此时事件队列应该是：

        同步队列：获取dom元素
        异步队列：从虚拟节点转真实节点并进行渲染
        根据先同步后异步的执行流程，是无法合并单元格的

        使用setTimeout 可以将元素放在异步队列执行，等页面加载完毕之后在获取dom元素就可以成功了！

 

2.6、合计行存在固定列

        合计行存在固定列时，会出现如下问题：

        （1）固定列中的合计行跑到底部了

        （2）合并单元格效果消失

 

 

        加上如下css以及修改部分js

  1. /* 存在固定列时，合计行位置修改开始 */
  2. .el-table /deep/ .el-table__fixed {
  3.     display: flex;
  4.     flex-direction: column;
  5. }
  6.  
  7. .el-table /deep/ .el-table__fixed-footer-wrapper,
  8. .el-table /deep/ .el-table__fixed-body-wrapper,
  9. .el-table /deep/ .el-table__fixed-header-wrapper {
  10.     position: initial;
  11. }
  12.  
  13. .el-table /deep/ .el-table__fixed-body-wrapper {
  14.     order: 1;
  15. }
  16.  
  17. .el-table /deep/ .el-table__fixed-footer-wrapper tbody td.el-table__cell {
  18.     border-top: none;
  19.     background: black;
  20.     color: white;
  21.     font-weight: bolder;
  22.  
  23. }
  24.  
  25. /* 存在固定列时，合计行位置修改开始 */

    

 

        最终效果如下：

3、源码

        App.vue

  1. <template>
  2.   <div id="app">
  3.     <SummaryTable></SummaryTable>
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8. import SummaryTable from '@/components/SummaryTable'
  9. export default {
  10.   components: {
  11.     SummaryTable
  12.   },
  13.   name: 'App',
  14.   data() {
  15.     return {
  16.  
  17.     }
  18.   },
  19. }
  20. </script>
  21.  
  22. <style>
  23. #app {
  24.   font-family: Avenir, Helvetica, Arial, sans-serif;
  25.   -webkit-font-smoothing: antialiased;
  26.   -moz-osx-font-smoothing: grayscale;
  27.   text-align: center;
  28.   color: #2c3e50;
  29.   margin-top: 60px;
  30. }
  31. </style>

        SummaryTable.vue

  1. <template>
  2.     <div>
  3.         <el-table ref="table" id="table" :data="tableData" border style="width: 100%" show-summary
  4.             :summary-method="getSummaries">
  5.             <el-table-column prop="date" label="日期" width="180" fixed="left">
  6.             </el-table-column>
  7.             <el-table-column prop="name" label="姓名" width="180" fixed="left">
  8.             </el-table-column>
  9.             <el-table-column prop="age" label="年龄"></el-table-column>
  10.             <el-table-column prop="age" label="年龄"></el-table-column>
  11.             <el-table-column prop="age" label="年龄"></el-table-column>
  12.             <el-table-column prop="age" label="年龄"></el-table-column>
  13.             <el-table-column prop="age" label="年龄"></el-table-column>
  14.             <el-table-column prop="age" label="年龄"></el-table-column>
  15.             <el-table-column prop="age" label="年龄"></el-table-column>
  16.             <el-table-column prop="age" label="年龄"></el-table-column>
  17.             <el-table-column prop="age" label="年龄"></el-table-column>
  18.             <el-table-column prop="age" label="年龄"></el-table-column>
  19.             <el-table-column prop="age" label="年龄"></el-table-column>
  20.             <el-table-column prop="money" label="财产"></el-table-column>
  21.             <el-table-column prop="money" label="财产"></el-table-column>
  22.             <el-table-column prop="money" label="财产"></el-table-column>
  23.             <el-table-column prop="money" label="财产"></el-table-column>
  24.         </el-table>
  25.     </div>
  26. </template>
  27.    
  28. <script>
  29.  
  30. export default {
  31.     name: 'App',
  32.     data() {
  33.         return {
  34.             tableData: [{
  35.                 date: '2016-05-01',
  36.                 name: '王小虎',
  37.                 age: 13,
  38.                 money: 100
  39.             }, {
  40.                 date: '2016-05-02',
  41.                 name: '王小虎',
  42.                 age: 25,
  43.                 money: 333
  44.             }, {
  45.                 date: '2016-05-03',
  46.                 name: '王小虎',
  47.                 age: 33,
  48.                 money: 555
  49.             }, {
  50.                 date: '2016-05-04',
  51.                 name: '王小虎',
  52.                 age: 23,
  53.                 money: 200
  54.             },
  55.             {
  56.                 date: '2016-05-05',
  57.                 name: '王小虎',
  58.                 age: 26,
  59.                 money: 666
  60.             }],
  61.         }
  62.     },
  63.     watch: {
  64.         tableData: {
  65.             immediate: true,
  66.             handler() {
  67.                 setTimeout(() => {
  68.                     const tds = document.querySelectorAll('#table .el-table__fixed-footer-wrapper tr>td');
  69.                     tds[0].colSpan = 2;
  70.                     tds[0].style.textAlign = 'center'
  71.                     tds[1].style.display = 'none'
  72.                 }, 0)
  73.             }
  74.         }
  75.     },
  76.     methods: {
  77.         // 合计行方法
  78.         getSummaries(param) {
  79.             const { columns, data } = param;
  80.             const sums = [];
  81.             columns.forEach((column, index) => {
  82.                 if (column.property == 'date') {
  83.                     sums[index] = '总价';
  84.                     return;
  85.                 }
  86.  
  87.                 // values是每一列的数据是一个数组
  88.                 const values = data.map(item => Number(item[column.property]));
  89.                 if (!values.every(value => isNaN(value))) {
  90.                     // 对values进行一个累加操作，累加那些非NAN的值
  91.                     const total = values.reduce((prev, curr) => {
  92.                         const value = Number(curr);
  93.                         if (!isNaN(value)) {
  94.                             return prev + curr;
  95.                         } else {
  96.                             return prev;
  97.                         }
  98.                     }, 0);
  99.  
  100.                     // 年龄计算平均值（绿色）
  101.                     if (column.property == 'age') {
  102.                         sums[index] = <span class={'green'}>{total / data.length}</span>
  103.                     }
  104.  
  105.                     // 财产计算总数（红色）
  106.                     if (column.property == 'money') {
  107.                         sums[index] = <span class={'red'}>{total}</span>
  108.                     }
  109.  
  110.                 }
  111.             });
  112.             // 将合计结果返回，是一个数组，每个位置的值与表格的列一一对应
  113.             return sums
  114.         }
  115.     }
  116. }
  117. </script>
  118.    
  119. <style scoped>
  120. .red {
  121.     color: red;
  122.     font-weight: bolder;
  123. }
  124.  
  125. .green {
  126.     color: lightgreen;
  127.     font-weight: bolder;
  128. }
  129.  
  130. /* 存在固定列时，合计行位置修改开始 */
  131. .el-table /deep/ .el-table__fixed {
  132.     display: flex;
  133.     flex-direction: column;
  134. }
  135.  
  136. .el-table /deep/ .el-table__fixed-footer-wrapper,
  137. .el-table /deep/ .el-table__fixed-body-wrapper,
  138. .el-table /deep/ .el-table__fixed-header-wrapper {
  139.     position: initial;
  140. }
  141.  
  142. .el-table /deep/ .el-table__fixed-body-wrapper {
  143.     order: 1;
  144. }
  145.  
  146. .el-table /deep/ .el-table__fixed-footer-wrapper tbody td.el-table__cell {
  147.     border-top: none;
  148.     background: black;
  149.     color: white;
  150.     font-weight: bolder;
  151. }
  152.  
  153. /* 存在固定列时，合计行位置修改开始 */
  154.  
  155. /* 默认有1px去掉样式影响 */
  156. .el-table /deep/ .el-table__fixed::before {
  157.     height: 0;
  158. }
  159.  
  160. /* 合计行整体样式修改开始 */
  161. .el-table /deep/ .el-table__footer-wrapper tbody td {
  162.     background: black;
  163.     color: white;
  164.     font-weight: bolder;
  165. }
  166.  
  167. /* 合计行整体样式修改结束*/
  168.  
  169.  
  170. /* 合计行位置修改开始 */
  171. .el-table {
  172.     display: flex;
  173.     flex-direction: column;
  174. }
  175.  
  176. .el-table /deep/ .el-table__body-wrapper {
  177.     order: 1;
  178. }
  179.  
  180. /* 合计行位置修改结束*/
  181. </style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/113702
推荐阅读
相关标签

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

  

闽ICP备14008679号