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

element表格 合并行两种方法_element table 合并行

作者：小丑西瓜9 | 2024-02-17 06:47:16

赞

踩

element table 合并行

第一种：后端传过来的数据是线性结构，用饿了么的span-method属性来做

效果：

 

 后端给的数据格式：

 

 代码：

主要代码 :     给el-table加上span-method="objectSpanMethod" 

html： 

  1. <el-table :data="tableData" :header-cell-style="{ background: '#EFF3F7', height: '50px', color: ' #4D4D4D', fontSize: '14px' }" :cell-style="{ fontSize: '14px' }" border :span-method="objectSpanMethod">
  2.                 <!-- 序号 -->
  3.                 <el-table-column label="序号" width="80" align="center" prop="sequenceNo">
  4.                 </el-table-column>
  5.                 <el-table-column prop="sequenceNo" align="center" label="托盘/电瓶车编号">
  6.                     <template slot-scope="{row}">
  7.                         {{ row.carrierCode }}
  8.                     </template>
  9.                 </el-table-column>
  10.                 <el-table-column prop="containerImage,tireModel,containerCapacity" header-align="center" label="轮胎型号" width="350">
  11.                     <template slot-scope="{row}">
  12.                         <div style="display:flex;align-items: center;">
  13.                             <el-image
  14.                             style="height: 33px;"
  15.                             :src="row.containerImage"
  16.                             :preview-src-list="[row.containerImage]"
  17.                             fit="contain"></el-image>
  18.                             <div style="margin-left:10px">
  19.                                 {{ row.tireModel }}-{{ row.containerCapacity }}条
  20.                             </div>
  21.                         </div>
  22.                     </template>
  23.                 </el-table-column>
  24.                 <el-table-column prop="actualCapacity,carrierCapacity" align="center" label="箱/袋数">
  25.                     <template slot-scope="{row}">
  26.                         <div>
  27.                             {{ row.actualCapacity }}/{{ row.carrierCapacity }}  
  28.                         </div>
  29.                     </template>
  30.                 </el-table-column>
  31.                 <el-table-column prop="sequenceNo" align="center" label="仓库">
  32.                     <template slot-scope="{row}">
  33.                         {{ row.warehouseName }}
  34.                     </template>
  35.                 </el-table-column>
  36.                 <el-table-column prop="sequenceNo" align="center" label="分拣人/分拣线" width="250">
  37.                     <template slot-scope="{row}">
  38.                         <div>
  39.                             {{ row.sorter }} {{ row.sortingLine }}号
  40.                         </div>
  41.                     </template>
  42.                 </el-table-column>
  43.                 <el-table-column prop="sequenceNo" align="center" label="入库时间">
  44.                     <template slot-scope="{row}">
  45.                         {{ row.inboundTime }}
  46.                     </template>
  47.                 </el-table-column>
  48.                 <!-- <el-table-column prop="remainingQuantity" align="center" label="状态">
  49.                 </el-table-column> -->
  50.                 <el-table-column align="center" label="操作" prop="sequenceNo">
  51.                     <template slot-scope="{row}">
  52.                             <el-button type="text" size="small" style="color: #1156B2;" 
  53.                             v-if="row.carrierType==2"
  54.                             @click="toPath('/putStorage/info',{carrierCode:row.carrierCode})">详情
  55.                             </el-button>
  56.                     </template>
  57.                 </el-table-column>
  58.             </el-table>

js：

  1. var this_;
  2. export default {
  3. 	data() {
  4. 		return {
  5. 			mergeObj: {},
  6.             mergeArr: ['sequenceNo'],
  7. 			tableData: [],
  8. 		}
  9. 	},
  10.     mounted() {
  11. 		this_=this
  12.         this_.init()
  13. 	},
  14.     methods: {
  15.     init(){
  16.             let params={
  17.                 ...this_.page,
  18.                 status:this_.activeName,
  19.                 ...this_.searchForm
  20.             }
  21.             if (this_.activeName=='2') {
  22.                 delete params['status']
  23.             }
  24.             if (this_.searchForm.time && this_.searchForm.time.length > 0) {
  25.                 params['inboundTimeFrom'] = this_.searchForm.time[0] + ' 00:00:00';
  26.                 params['inboundTimeTo'] = this_.searchForm.time[1] + ' 23:59:59';
  27.                 delete params.time
  28.             }
  29.             delete params.total
  30.  
  31. 			get_request(url,params).then((res) => {
  32. 				if(res.data.code==0){
  33. 					let {current,size,total}=res.data.data
  34.                     this_.page={current,size,total}
  35.                     this_.tableData=res.data.data.records
  36.                     this.getSpanArr(res.data.data.records);
  37. 				}
  38. 			}).catch(() => { })
  39. 		},
  40.     getSpanArr(data) {
  41.             this.mergeArr.forEach((key, index1) => {
  42.                 let count = 0; // 用来记录需要合并行的起始位置
  43.                 this.mergeObj[key] = []; // 记录每一列的合并信息
  44.                 data.forEach((item, index) => {
  45.                     // index == 0表示数据为第一行，直接 push 一个 1
  46.                     if(index === 0) {
  47.                         this.mergeObj[key].push(1);
  48.                     } else {
  49.                         // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
  50.                         if(item[key] === data[index - 1][key]) {
  51.                             this.mergeObj[key][count] += 1;
  52.                             this.mergeObj[key].push(0);
  53.                         } else {
  54.                             // 如果当前行和上一行其值不相等
  55.                             count = index; // 记录当前位置
  56.                             this.mergeObj[key].push(1); // 重新push 一个 1
  57.                         }
  58.                     }
  59.                 })
  60.             })
  61.         },
  62.         objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  63.             // 判断列的属性
  64.             if(this.mergeArr.indexOf(column.property) !== -1) {
  65.                 // 判断其值是不是为0
  66.                 if(this.mergeObj[column.property][rowIndex]) {
  67.                     return [this.mergeObj[column.property][rowIndex], 1]
  68.                 } else {
  69.                     // 如果为0则为需要合并的行
  70.                     return [0, 0];
  71.                 }
  72.             }
  73.         },
  74.     },
  75. }

第二种：后端传过来的数据是树形结构，主要用css来做

效果：

 后端给的数据格式：

 

 代码：

html：

  1. <el-table :data="tableData" :header-cell-style="{ background: '#EFF3F7', height: '50px', color: ' #4D4D4D', fontSize: '14px' }" :cell-style="{ fontSize: '14px' }" border>
  2.                 <!-- 序号 -->
  3.                 <el-table-column label="序号" width="80" align="center" type="index">
  4.                 </el-table-column>
  5.                 <el-table-column prop="carrierCodeNew" align="center" label="新托盘编码">
  6.                 </el-table-column>
  7.                 <el-table-column prop="carrierCodeOld" align="center" label="原托盘编码">
  8.                 </el-table-column>
  9.                 <el-table-column prop="changeDetailList" align="center" label="轮胎型号">
  10.                     <template slot-scope="{row}">
  11.                         <div v-for="(item,index) in row.changeDetailList" :key="index"
  12.                         :class="row.changeDetailList.length > 0 && index != 0 ? 'hxwd_table_item_left' : 'hxwd_table_item_left_first'">
  13.                         <el-image
  14.                             style="height: 33px;"
  15.                             :src="item.containerImage"
  16.                             :preview-src-list="[item.containerImage]"
  17.                             fit="contain"></el-image>
  18.                             <div style="margin-left:10px">
  19.                                 {{ item.goodsModel }}-{{ item.capacity }}条
  20.                             </div>
  21.                         </div>
  22.                     </template>
  23.                 </el-table-column>
  24.                 <el-table-column prop="changeDetailList" align="center" label="条数">
  25.                     <template slot-scope="{row}">
  26.                         <div v-for="(item,index) in row.changeDetailList" :key="index"
  27.                         :class="row.changeDetailList.length > 0 && index != 0 ? 'hxwd_table_item_center' : 'hxwd_table_item_center_first'">
  28.                                 {{ item.goodsCnt }}
  29.                         </div>
  30.                     </template>
  31.                 </el-table-column>
  32.                 <el-table-column prop="warehouseCode" align="center" label="仓库">
  33.                 </el-table-column>
  34.                 <el-table-column prop="createdTime" align="center" label="更换时间">
  35.                 </el-table-column>
  36.             </el-table>

css:

.hxwd_table_item_center_first  .hxwd_table_item_center   表格内容居中

.hxwd_table_item_left_first  .hxwd_table_item_left        表格内容居左

  1. .hxwd_table_item_center_first {padding-left: 10px;margin-left: -10px;margin-right: -10px;padding-right: 10px;min-height: 50px;display: flex;align-items: center;justify-content: center;}
  2.   .hxwd_table_item_center {padding-left: 10px;margin-left: -10px;margin-right: -10px;padding-right: 10px;min-height: 50px;display: flex;align-items: center;justify-content: center;border-top: 1px solid #EAEAEA;}
  3.   .hxwd_table_item_left_first {padding-left: 10px;margin-left: -10px;margin-right: -10px;padding-right: 10px;min-height: 50px;display: flex;align-items: center;}
  4.   .hxwd_table_item_left {padding-left: 10px;margin-left: -10px;margin-right: -10px;padding-right: 10px;min-height: 50px;display: flex;align-items: center;border-top: 1px solid #EAEAEA;}

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

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

  

闽ICP备14008679号