element表格 合并行两种方法

已于 2023-08-25 17:14:35 修改
阅读量2.1k 收藏 7
点赞数 7
文章标签： vue.js elementui javascript
于 2023-05-19 11:18:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yangpengxunb/article/details/130762588
版权

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

效果：

 

 后端给的数据格式：

 

 代码：

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

html： 

<el-table :data="tableData" :header-cell-style="{ background: '#EFF3F7', height: '50px', color: ' #4D4D4D', fontSize: '14px' }" :cell-style="{ fontSize: '14px' }" border :span-method="objectSpanMethod">
                <!-- 序号 -->
                <el-table-column label="序号" width="80" align="center" prop="sequenceNo">
                </el-table-column>
                <el-table-column prop="sequenceNo" align="center" label="托盘/电瓶车编号">
                    <template slot-scope="{row}">
                        {{ row.carrierCode }}
                    </template>
                </el-table-column>
                <el-table-column prop="containerImage,tireModel,containerCapacity" header-align="center" label="轮胎型号" width="350">
                    <template slot-scope="{row}">
                        <div style="display:flex;align-items: center;">
                            <el-image
                            style="height: 33px;"
                            :src="row.containerImage"
                            :preview-src-list="[row.containerImage]"
                            fit="contain"></el-image>
                            <div style="margin-left:10px">
                                {{ row.tireModel }}-{{ row.containerCapacity }}条
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="actualCapacity,carrierCapacity" align="center" label="箱/袋数">
                    <template slot-scope="{row}">
                        <div>
                            {{ row.actualCapacity }}/{{ row.carrierCapacity }}  
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="sequenceNo" align="center" label="仓库">
                    <template slot-scope="{row}">
                        {{ row.warehouseName }}
                    </template>
                </el-table-column>
                <el-table-column prop="sequenceNo" align="center" label="分拣人/分拣线" width="250">
                    <template slot-scope="{row}">
                        <div>
                            {{ row.sorter }} {{ row.sortingLine }}号
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="sequenceNo" align="center" label="入库时间">
                    <template slot-scope="{row}">
                        {{ row.inboundTime }}
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="remainingQuantity" align="center" label="状态">
                </el-table-column> -->
                <el-table-column align="center" label="操作" prop="sequenceNo">
                    <template slot-scope="{row}">
                            <el-button type="text" size="small" style="color: #1156B2;" 
                            v-if="row.carrierType==2"
                            @click="toPath('/putStorage/info',{carrierCode:row.carrierCode})">详情
                            </el-button>
                    </template>
                </el-table-column>
            </el-table>

js：

var this_;
export default {
	data() {
		return {
			mergeObj: {},
            mergeArr: ['sequenceNo'],
			tableData: [],
		}
	},
    mounted() {
		this_=this
        this_.init()
	},
    methods: {
    init(){
            let params={
                ...this_.page,
                status:this_.activeName,
                ...this_.searchForm
            }
            if (this_.activeName=='2') {
                delete params['status']
            }
            if (this_.searchForm.time && this_.searchForm.time.length > 0) {
                params['inboundTimeFrom'] = this_.searchForm.time[0] + ' 00:00:00';
                params['inboundTimeTo'] = this_.searchForm.time[1] + ' 23:59:59';
                delete params.time
            }
            delete params.total

			get_request(url,params).then((res) => {
				if(res.data.code==0){
					let {current,size,total}=res.data.data
                    this_.page={current,size,total}
                    this_.tableData=res.data.data.records
                    this.getSpanArr(res.data.data.records);
				}
			}).catch(() => { })
		},
    getSpanArr(data) {
            this.mergeArr.forEach((key, index1) => {
                let count = 0; // 用来记录需要合并行的起始位置
                this.mergeObj[key] = []; // 记录每一列的合并信息
                data.forEach((item, index) => {
                    // index == 0表示数据为第一行，直接 push 一个 1
                    if(index === 0) {
                        this.mergeObj[key].push(1);
                    } else {
                        // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
                        if(item[key] === data[index - 1][key]) {
                            this.mergeObj[key][count] += 1;
                            this.mergeObj[key].push(0);
                        } else {
                            // 如果当前行和上一行其值不相等
                            count = index; // 记录当前位置
                            this.mergeObj[key].push(1); // 重新push 一个 1
                        }
                    }
                })
            })
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            // 判断列的属性
            if(this.mergeArr.indexOf(column.property) !== -1) {
                // 判断其值是不是为0
                if(this.mergeObj[column.property][rowIndex]) {
                    return [this.mergeObj[column.property][rowIndex], 1]
                } else {
                    // 如果为0则为需要合并的行
                    return [0, 0];
                }
            }
        },
    },
}

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

效果：

 后端给的数据格式：

 

 代码：

html：

<el-table :data="tableData" :header-cell-style="{ background: '#EFF3F7', height: '50px', color: ' #4D4D4D', fontSize: '14px' }" :cell-style="{ fontSize: '14px' }" border>
                <!-- 序号 -->
                <el-table-column label="序号" width="80" align="center" type="index">
                </el-table-column>
                <el-table-column prop="carrierCodeNew" align="center" label="新托盘编码">
                </el-table-column>
                <el-table-column prop="carrierCodeOld" align="center" label="原托盘编码">
                </el-table-column>
                <el-table-column prop="changeDetailList" align="center" label="轮胎型号">
                    <template slot-scope="{row}">
                        <div v-for="(item,index) in row.changeDetailList" :key="index"
                        :class="row.changeDetailList.length > 0 && index != 0 ? 'hxwd_table_item_left' : 'hxwd_table_item_left_first'">
                        <el-image
                            style="height: 33px;"
                            :src="item.containerImage"
                            :preview-src-list="[item.containerImage]"
                            fit="contain"></el-image>
                            <div style="margin-left:10px">
                                {{ item.goodsModel }}-{{ item.capacity }}条
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="changeDetailList" align="center" label="条数">
                    <template slot-scope="{row}">
                        <div v-for="(item,index) in row.changeDetailList" :key="index"
                        :class="row.changeDetailList.length > 0 && index != 0 ? 'hxwd_table_item_center' : 'hxwd_table_item_center_first'">
                                {{ item.goodsCnt }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="warehouseCode" align="center" label="仓库">
                </el-table-column>
                <el-table-column prop="createdTime" align="center" label="更换时间">
                </el-table-column>
            </el-table>

css:

.hxwd_table_item_center_first  .hxwd_table_item_center   表格内容居中

.hxwd_table_item_left_first  .hxwd_table_item_left        表格内容居左

.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;}
  .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;}
  .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;}
  .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;}

奈何桥上哈啤酒
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue element实现表格合并行数据
01-18
本文实例为大家分享了vue element实现表格合并行数据的具体代码，供大家参考，具体内容如下 支持不分页的表格数据，分页的表格数据还有小bug <el
el-table合并列 合并单元格
09-03
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
el-table表格动态合并行、合并行列及详解
热门推荐
我是段段的博客
08-18 2万+
在写项目的时候有时候会经常遇到把行和列合并起来的情况，因为有些数据是重复渲染的，不合并行列会使表格看起来非常的混乱，如下： 而我们想要的数据是下面这种情况，将重复的行进行合并，使表格看起来简单明了，如下： 所谓的合并行就是将多行相同的数据变成一行来显示，直接上代码，页面的布局比较简单 是el-table上属性，其值是一个，objectSpanMethod方法是用来处理合并行的返回值，tableData数据如下： 首先需要对数据就行处理，就是比较当前行与上一行的值是否相等（如果是第一行数据，直接将值赋值为1）
使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用
都随它大小便吧
05-10 1万+
有时遇到一些需求，需要实现ElementUI或ElementPlus中，el-tabled组件合并单元格的功能，稍微了解一下它的数据格式，不难可以写出比合并方法。但是在鼠标经过单元行时，会出现高亮的行与鼠标经过的行不一致的BUG。因此还需要实现@cell-mouse-enter和@cell-mouse-leave这两个方法，才可解决此问题。
element-ui/view-ui表格的合并行和列的多种方法（超级详细）
最新发布
前端探险家的博客
03-29 2116
vue的这两个组件库的表格的行和列的写法是一样的，都是通过span-method方法可以实现的；下面我们就以view ui的表格组件为例；该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。也可以返回一个键名为 rowspan 和 colspan 的对象。看上面对该方法的说明太过于官方，我们直接去组件库把实现的效果图拿过来仔细分析一下；
el-table树形表格表单验证(列表生成序号)
11-20
树形表格表单验证预览 树形列表生成序号 首先需要生成一个序号用来确定表单验证的目标row，通过广度优先遍历，以1，1.1，1.1.1的规则对树形列表生成确定唯一值的索引，因为列表自身可以做CURD，因此需要每次列表的item增加或减少时重新调用生成索引的方法。 setIndex = (data) => { let queue = [...data]; let loop = 0; while (queue.length > 0) { loop++ [...queue].forEach((child, i
el-table合并行
王也的博客
06-01 3680
需求不变，因打印功能，el-table适配性不好，改为原生table布局，合并行要素为rowspan，所以在遍历数据时要分开控制rowspan，同理根据业务id分段数据源，分别处理各自的time合并行。需求为：序号根据业务id合并，合并后的业务数据再根据时间进行二次合并。同学的帖子，又根据自己的需求进行了调整。
el-table表格合并行
weixin_53584437的博客
03-18 2560
1
el-table 合并单元格（合并行）
CMDN123456的博客
03-28 1万+
vue2 el-table 合并行
el-table行合并
qq_36712606的博客
05-06 3679
需要把指定列的相同且相邻的数据合并起来 在获取tabledata的接口调用getSpanArr方法,此方法通过遍历把需要合并的字段id判断,相同的就给spanArr数组加一,在表格渲染时调用objectSpanMethod方法 需要新增一个数组spanArr接受判断的数据 <el-table :data="tableData" :span-method="objectSpanMethod" border .
el-table 合并行
yusun1234的博客
07-12 2741
表格合并
el-table合并单元格计算
12-28
el-table合并单元格计算
sortable+element 实现表格行拖拽的方法示例
10-16
主要介绍了sortable+element 实现表格行拖拽的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element-ui表格合并span-method的实现方法
01-19
官网给我们提供了span-method的方法可以进行表格合并,有4个参数返回:row,column,rowIndex,columnIndex;row和column是表格的行和列,里面是当前行和列的值,也就是tableData里的值,rowIndex,columnIndex是当前行和列的...
element-ui表格列金额显示两位小数的方法
12-03
对于金额的显示，大多情况下需要保留两位小数，比如下面的（表格采用 element-ui）： 在vue.js中，对文本的处理通常是通过设置一系列的过滤器，过滤器可以用在两个地方：双花括号插值 和 v-bind 表达式 (后者从 ...
element实现合并单元格通用方法
12-13
通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素...
element-ui 表格数据时间格式化的方法
12-02
在element-ui table 如何格式化呢  1.首先 代码如下:”AuditEndTime” label=”处理时间” width=”120″ formatter=”dateFormat” align=”center”>  主要是:formatter=”dateFormat” 这个属性  formatter...
element UI Table 根据判断列值相等即合并单元格 & 根据某列值两个相等以上即设置单元格的 style
是大林的林吖-博客
11-13 1909
一、合并行单元格 :span-method=“objectSpanMethod” <el-table v-loading="tableLoading" :data="tabledata" :element-loading-text="$t('common.loading')" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
el-table相同行合并（通用函数，将相同多行数据合并为一行）
阿Q
08-22 3515
el-table相同行合并，通用函数，将相同多行数据合并为一行，使表格看起来清晰明了；该通用合并函数直接复制即用
element 表格动态合并行和列
12-18
element-ui是一个基于Vue.js的桌面端UI组件库，它提供了丰富的组件和功能，包括表格组件。在element-ui的表格组件中，可以实现动态合并行和列的功能。 动态合并行和列是指根据特定条件，将相邻的单元格合并成一个大单元格。在element-ui的表格组件中，可以通过使用scoped slot来实现动态合并行和列。 对于行的合并，可以通过使用`slot-scope`来自定义每一行的内容和样式。在`slot-scope`中可以根据条件判断是否需要合并当前行和前一行的某些单元格。如果需要合并，可以通过设置合适的`rowspan`属性来实现行的合并。 对于列的合并，可以通过使用`table-column`组件的`column-key`属性来指定需要合并的列。在`table-column`中可以使用`slot-scope`来自定义每一列的内容和样式。在`slot-scope`中也可以根据条件判断是否需要合并当前列和前一列的某些单元格。如果需要合并，可以通过设置合适的`colspan`属性来实现列的合并。 element-ui的表格组件还提供了其他一些常用的功能，如排序、筛选、分页等。可以根据实际需求，结合以上提到的动态合并行和列的功能，灵活地使用element-ui的表格组件来实现各种复杂的表格布局和交互效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值