element表格 合并行两种方法

已于 2023-08-25 17:14:35 修改
阅读量2.7k 收藏 7
点赞数 8
文章标签： vue.js elementui javascript
于 2023-05-19 11:18:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangpengxunb/article/details/130762588
版权
文章介绍了两种方法来处理后端传递的数据并在前端展示。第一种情况，当数据是线性结构时，利用饿了么UI库的`span-method`属性来合并`el-table`中的单元格。第二种情况，面对树形结构数据，通过CSS样式实现表格内容的布局和合并。两种方法分别给出了详细的HTML和JS代码示例。
摘要由CSDN通过智能技术生成

第一种：后端传过来的数据是线性结构，用饿了么的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;}

element ui 表格（el-table）合并行
https://shixuebin.gitee.io/hexo-blog/
12-08 2485
element-ui官网中关于行合并的例子是根据行号进行合并的，这显然不符合我们日常开发需求，因为通常我们table中的数据都是动态生成的，所以需要做一些修改。我们首先解读一下官网实例中的各参数的意义： objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 用于设置要合并的列 此处只合并了 0 列 if (columnIndex === 0) { // 用于设置合并开始的行号 （每两行合并一下） if (rowInd..
如何实现element表格合并行？
刘杨造梦的博客
06-18 493
首先，他这个合并出现了问题，第二，我仔细看了一下他后端给他的数据，后端已经合并好数据了。这里官方的教程上写的不是很详细，可能小白们有误解这很正常，官方教程只是一笔带过了一下说是使用span-method方法来合并行，却没有说这个合并行其实有两种方法，第一种就是后端在没有处理数据的情况下，使用官方的span-method方法是非常不错的选择，还有一种方法就是后端处理好数据的情况下，这种情况就不需要使用span-method方法了，直接跟普通的表格一样写，只不过有多条数据的地方使用循环就好了。
element用法总结
香蕉你个芭呐呐的博客
12-23 3129
表格合并单元格 通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。 如下：合并列 html...
elementui完美做到table动态复杂合并行、合并列，适用于vue2、vue3
最新发布
weixin_44953151的博客
09-26 1495
elementui完美做到动态合并行、合并列，适用于vue2、vue3
element-ui/view-ui表格的合并行和列的多种方法（超级详细）
前端探险家的博客
03-29 7612
vue的这两个组件库的表格的行和列的写法是一样的，都是通过span-method方法可以实现的；下面我们就以view ui的表格组件为例；该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。也可以返回一个键名为 rowspan 和 colspan 的对象。看上面对该方法的说明太过于官方，我们直接去组件库把实现的效果图拿过来仔细分析一下；
ElementUI实现el-table组件的合并行功能
yang295242361的博客
08-30 1093
需要实现ElementUI中，el-tabled组件合并单元格的功能，稍微了解一下它的数据格式，不难可以写出比合并方法。但是在鼠标经过单元行时，会出现高亮的行与鼠标经过的行不一致的BUG。因此还需要实现@cell-mouse-enter和@cell-mouse-leave这两个方法，才可解决此问题。
element 表格(table)合并行
Zt0118的博客
06-30 498
element 表格(table)合并行
elementui中table组件合并行(看就懂)
m0_60648668的博客
07-03 836
elementPlus一样使用。
element实现合并单元格通用方法
10-16
在Element UI库中，实现合并单元格是一种常见的需求，尤其在展示复杂表格数据时。Element 提供了`span-method`这个API，让我们能够方便地控制表格中的单元格合并。本篇将详细介绍如何利用Element实现合并单元格的...
vue elementUI table 自定义表头和行合并的实例代码
10-16
对于行合并，Element UI的表格组件提供了:span-method属性，允许开发者通过传入一个方法来自定义行或列的合并行为。这个方法的对象参数包含当前行（row）、当前列（column）、当前行号（rowIndex）和当前列号...
基于element-ui的table实现树级表格操作及单元格合并
trottoir-blog
10-31 4713
基于element-ui的table，在一张表内实现多级树状数据展示及同属性的单元格合并，并在表格内实现增删改操作。
vue element实现表格合并行数据
01-18
本文实例为大家分享了vue element实现表格合并行数据的具体代码，供大家参考，具体内容如下 支持不分页的表格数据，分页的表格数据还有小bug <el
element UI合并列，并且在合并列之后进行数字排序
qq_41648113的博客
10-28 1585
element UI 合并列后，进行数字排序 最近业务需要实现单元格合并列的功能，并且在第一列用数字进行排序，今天整理了一下实现过程，贡献给在座的各位 实现后的样式如下 直接上代码 html代码 <template> <div> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width:
Element表格之表头合并、行合并和列合并
szzlh123456789的博客
05-17 2867
要进行表格合并，关键在于你要对数据渲染的前进行判断处理，在这里，首先要在table中写入:span-method=‘objectSpanMethod’,然后在js部分写上方法。这里主要使用到:header-cell-style="handerMethod"和:span-method="spanMethod"用来合并行和列。这里判断的方式就有些不同了。列合并相对于行合并要简单，但是要确定好你要合并哪一行，如果表格是固定的，就轻松多了，只要给对应的那几行进行合并即可。-cell-style对表头做了一些处理。
elementui组件table表，同时合并列和行的问题
aofensuo8016的博客
08-15 1131
项目需要实现每三行合并两行，然后每三行合并三列，下图这种效果： 代码： <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%"> <el-table-column ...
element合并表格
weixin_53248537的博客
04-01 811
合并了id相同的行的数据,仅限第一列
element table 合并行
anne0000的博客
01-21 1040
记录 第一步：判断每一行的合并行数 tableData: [],//表格数据 spanArr: [],//记录合并行数 pos: 0 在获取table数据后调用checkRowsNum 方法，判断每一行的合并行数 checkRowsNum() { let that = this; let rowNum = 0; this.tableData.forEach((item, index) => { if (index == ..
element 表格合并
John的博客
04-13 895
效果如图 前两列合并 1.启用函数: span-method="objectSpanMethod" 2.创建存储合并行的数组 item1:[],//存放合并行数据 item2:[],//存放合并行数据 数据类型 data[]为表格数据 3.处理合并数据 updated: function () { let itemDot1 = 0; let itemDot2 = 0; let item1 = []; let item2 = [];
Element表格合并行
qq_41154522的博客
12-18 627
ElementUI 表格合并行 有图有真相 el-table 标签中加入 :span-method="objectSpanMethod" 方法 对获取到的表格数据进行改造// 第二个参数为一个数组，放需要合并的字段名 this.tableData = this.mergeTableRow(this.tableData, ['itemOutCode', 'itemName','itemCode','deptCodeName','voltLevelName']) mergeTableRow(data,
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、付费专栏及课程。

余额充值