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

使用elementUI构建复杂表格，合并行或列，多级表头等

作者：你好赵伟 | 2024-05-25 09:53:33

赞

踩

elementui

项目场景：

        前端开发过程中常常会遇到各种开发表格的场景，有时候有的表格比较简单有的比较复杂（如下图简单示例所示，有合并项和多级表头），Elementui的el-table控件也可以支持构建复杂的表格，本文将指导你如何快速开发复杂表格~~~

问题描述及解决方案

1、多级表头

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。

  1. <template>
  2.         <div class="tableWrap">
  3.       <el-table
  4.         id="resultTableProject"
  5.         :data="tableData"
  6.         border
  7.         v-loading="loading"
  8.         element-loading-text="数据查询中"
  9.         :span-method="spanMethod"
  10.         height="620"
  11.         size='small'
  12.       >
  13.         <el-table-column
  14.           label="项目编号"
  15.           prop="id"
  16.           wdth="160"
  17.           align="center"
  18.         />
  19.         <el-table-column
  20.           label="项目名称"
  21.           prop="casename"
  22.           align="center"
  23.         />
  24.    
  25.           <el-table-column
  26.           label="部门"
  27.           prop="bm"
  28.           align="center"
  29.         />
  30.   
  31.  
  32.         <el-table-column
  33.           label="部门人员(产值)"
  34.           align="center"          
  35.          
  36.         >
  37.           <el-table-column
  38.             v-for="(item, index) in userData"
  39.             :key="index"
  40.             :label="item.name"
  41.             :prop="item.name + 'cz'"
  42.             width="200"
  43.             align="center"
  44.           />
  45.         </el-table-column>
  46.       </el-table>
  47.  
  48.     </div>
  49. </template>
  50. <script  setup>
  51. import { ref, onMounted,onBeforeMount, watch, reactive ,toRefs,toRaw,shallowRef} from "vue";
  52.  
  53. let tableData=ref([
  54.   {  id:202112312,casename:'小家电项目',bm:"制造一队",'张三cz':100,},
  55.   {  id:202112342,casename:'小家电项目',bm:"制造二队",'李四cz':200,},
  56.   {  id:202112343,casename:'电视机',bm:"制造三队",'王五cz':300},
  57.   {  id:202112344,casename:'电视机',bm:"制造三队",'王五cz':300,},
  58.   {  id:202112345,casename:'空调项目',bm:"制造四队",'孙七cz':300},
  59.   {  id:202112346,casename:'冰箱项目',bm:"制造四队",'孙七cz':300},
  60. ])
  61.  
  62. let userData=ref([
  63.     {
  64.         name:'张三',
  65.     },
  66.       {
  67.         name:'李四',
  68.     },
  69.     {
  70.         name:'王五',
  71.     },
  72.     {
  73.         name:'孙七',
  74.     }
  75. ])
  76.  
  77.  
  78. </script>

2、合并行或列

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

  1. <template>
  2.         <div class="tableWrap">
  3.       <el-table
  4.         id="resultTableProject"
  5.         :data="tableData"
  6.         border
  7.         v-loading="loading"
  8.         element-loading-text="数据查询中"
  9.         :span-method="spanMethod"
  10.         height="620"
  11.         size='small'
  12.       >
  13.         <el-table-column
  14.           label="项目编号"
  15.           prop="id"
  16.           wdth="160"
  17.           align="center"
  18.         />
  19.         <el-table-column
  20.           label="项目名称"
  21.           prop="casename"
  22.           align="center"
  23.         />
  24.    
  25.           <el-table-column
  26.           label="部门"
  27.           prop="bm"
  28.           align="center"
  29.         />
  30.   
  31.  
  32.         <el-table-column
  33.           label="部门人员(产值)"
  34.           align="center"          
  35.          
  36.         >
  37.           <el-table-column
  38.             v-for="(item, index) in userData"
  39.             :key="index"
  40.             :label="item.name"
  41.             :prop="item.name + 'cz'"
  42.             width="200"
  43.             align="center"
  44.           />
  45.         </el-table-column>
  46.       </el-table>
  47.  
  48.     </div>
  49. </template>
  50. <script  setup>
  51. import { ref, onMounted,onBeforeMount, watch, reactive ,toRefs,toRaw,shallowRef} from "vue";
  52.  
  53. let tableData=ref([
  54.   {  id:202112312,casename:'小家电项目',bm:"制造一队",'张三cz':100,},
  55.   {  id:202112342,casename:'小家电项目',bm:"制造二队",'李四cz':200,},
  56.   {  id:202112343,casename:'电视机',bm:"制造三队",'王五cz':300},
  57.   {  id:202112344,casename:'电视机',bm:"制造三队",'王五cz':300,},
  58.   {  id:202112345,casename:'空调项目',bm:"制造四队",'孙七cz':300},
  59.   {  id:202112346,casename:'冰箱项目',bm:"制造四队",'孙七cz':300},
  60. ])
  61.  
  62. let userData=ref([
  63.     {
  64.         name:'张三',
  65.     },
  66.       {
  67.         name:'李四',
  68.     },
  69.     {
  70.         name:'王五',
  71.     },
  72.     {
  73.         name:'孙七',
  74.     }
  75. ])
  76.  
  77.  
  78. const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
  79.   // 如果当前列不是组织机构列，则返回 { rowspan: 1, colspan: 1 }，表示该单元格不需要合并
  80.   // if (columnIndex !== 0 && columnIndex !== 1&& columnIndex !== 2  &&columnIndex!==9&&columnIndex!==10) {
  81.   //   return { rowspan: 1, colspan: 1 };
  82.   // }
  83.     if (columnIndex !== 0 && columnIndex !== 1) {
  84.     return { rowspan: 1, colspan: 1 };
  85.   }
  86.  
  87.   // 如果当前行是该组织机构的第一行，则计算该组织机构的行数，并返回 { rowspan, colspan: 1 }，表示需要合并的行数为 rowspan
  88.   if (
  89.     rowIndex === 0 ||
  90.     row.casename !== tableData.value[rowIndex - 1].casename
  91.   ) {
  92.     const rowCount = tableData.value.filter(
  93.       (i) => i.casename === row.casename
  94.     ).length;
  95.     return { rowspan: rowCount, colspan: 1 };
  96.   }
  97.   // 否则返回 { rowspan: 0, colspan: 0 }，表示该单元格已被上方单元格合并
  98.   return { rowspan: 0, colspan: 0 };
  99. };
  100.  
  101. </script>
  102. <style lang="less" scoped>
  103. .tableQualityProject {
  104.   height: 100vh;
  105.   width: 100%;
  106.   overflow: auto;
  107.   background-image: #f2f2f2;
  108.   h1 {}
  109. }
  110.   .tableWrap {
  111.     padding: 0 20px;
  112.     //  width: 100%;
  113.     // margin: 0 auto;
  114.     /deep/ .el-table__header th {
  115.       background-color: #409eff!important ; /* 设置表头颜色 */    
  116.      color: #fff; /* 设置表头文字颜色 */
  117.     //  background-color:#FAFAFA;
  118.     //  color:#252525;
  119.      border:1px solid f5f5f5;
  120.     }
  121.     /deep/ .el-table .cell {
  122.       // font-weight: 700;
  123.       font-size: 16px;
  124.       padding: 0;
  125.     }
  126.     .gzlWrap {
  127.       // border-bottom:1px solid #dfdfdf;
  128.       &:last-child {
  129.         border-bottom: none;
  130.       }
  131.       span {
  132.         display: inline-block;
  133.         padding: 5px 0;
  134.       }
  135.       .key {
  136.         width: 60%;
  137.       }
  138.       .value {
  139.         width: 40%;
  140.       }
  141.     }
  142.  
  143.     .selfTableHead {
  144.       display: flex;
  145.       span {
  146.         display: inline-block;
  147.         width: 60px;
  148.       }
  149.     }
  150.   }
  151. </style>

3、自定义表头颜色

最简单的：修改表头样式即可

  1.   .tableWrap {
  2.     padding: 0 20px;
  3.     //  width: 100%;
  4.     // margin: 0 auto;
  5.     /deep/ .el-table__header th {
  6.       background-color: #409eff!important ; /* 设置表头颜色 */    
  7.      color: #fff; /* 设置表头文字颜色 */
  8.     //  background-color:#FAFAFA;
  9.     //  color:#252525;
  10.      border:1px solid f5f5f5;
  11.     }
  12.     /deep/ .el-table .cell {
  13.       // font-weight: 700;
  14.       font-size: 16px;
  15.       padding: 0;
  16.     }
  17.     .gzlWrap {
  18.       // border-bottom:1px solid #dfdfdf;
  19.       &:last-child {
  20.         border-bottom: none;
  21.       }
  22.       span {
  23.         display: inline-block;
  24.         padding: 5px 0;
  25.       }
  26.       .key {
  27.         width: 60%;
  28.       }
  29.       .value {
  30.         width: 40%;
  31.       }
  32.     }
  33.  
  34.     .selfTableHead {
  35.       display: flex;
  36.       span {
  37.         display: inline-block;
  38.         width: 60px;
  39.       }
  40.     }
  41.   }

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

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

  

闽ICP备14008679号