element动态合并行和列

项目要求：

（1）第一列合并的行数根据后台传来的数据进行判断，同一类的就进行合并，所以这个需要判断每一类都多少个数据，就合并多少行 getSpanArr方法功能就是知道合并的行数

（2）每一类的最后一行都进行合并，合并除了第一列之外的所有的列，所以这个需要知道你要合并的所有的列是在第几行

代码以及注释如下：

html：

 <!--注意：列表这里比较特殊，数据结构比较特殊，第一：接接口的时候让后台按照死数据的数据结构进行传送，第二：每页只显示三种门店-->
<el-table :data="tableData" class="ems-table borderstyle" :span-method="objectSpanMethod"  style="width: 100%;"><el-table-column prop="sellerName" label="商品名称" width="180"></el-table-column><el-table-column prop="typeName" label="分类类型" :class="'ddd'"></el-table-column><el-table-column prop="date" label="月份"></el-table-column><el-table-column prop="total" label="总用量"></el-table-column><el-table-column prop="money" label="金额（元）"></el-table-column>
</el-table>

js：

 // 1、 发请求获取数据 这个方法放到created或者是mounted中进行调用，默认页面打开就开始获取数据dataList () {billManage(query).then(res => {// 合并行数函数的调用this.getSpanArr(res.data)})}// 2、 因为要合并的行数是不固定的，此函数是实现合并随意行数的功能getSpanArr (data) {console.log(data)//从后台获取的数据this.spanArr = []for (var i = 0; i < data.length; i++) {if (i === 0) {// 如果是第一条记录（即索引是0的时候），向数组中加入１this.spanArr.push(1)this.pos = 0} else {if (data[i].sellerName === data[i - 1].sellerName) {// 如果useName相等就累加，并且push 0this.spanArr[this.pos] += 1this.spanArr.push(0)} else {// 不相等push 1this.spanArr.push(1)this.pos = i}}}console.log(this.spanArr)}
// 3、合并行数objectSpanMethod ({ row, column, rowIndex, columnIndex }) {// columnIndex === 0 找到第一列，实现合并随机出现的行数if (columnIndex === 0) {const _row = this.spanArr[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col}// columnIndex === 1 找到第二列，实现合并第2到4列} else if (columnIndex === 1) {for (var i = 0; i < this.spanArr.length; i++) {// 筛选数组中数值不是0的数if (this.spanArr[i] > 1) {// console.log(i, this.spanArr[i])// 发现的规律：当前索引 + 索引所对应的数值 - 1 = 所要合并的第几行if (rowIndex === (i + this.spanArr[i] - 1)) {setTimeout(() => {console.log(document.querySelectorAll(`tr:nth-of-type(${i + this.spanArr[i]})`), i + this.spanArr[i])document.querySelectorAll(`tr:nth-of-type(${i + this.spanArr[i]}) td div`)[0].style.float = 'right'document.querySelectorAll(`tr:nth-of-type(${i + this.spanArr[i]}) td div`)[0].style.marginRight = '10%'}, 0)return {rowspan: 1,colspan: 4}}}}}}

最终效果以及后台数据格式展示：

2019/5/13 更

今天看了vue官网的api才发现，api提供了一种 nextTick方法，其功能是在数据响应完全之后再对数据进行操作，所以上面的代码中，我用setTimeout定时器来完成的功能完全可以使用nextTick来完成，具体的demo在我的博客中：https://blog.csdn.net/zhumizhumi/article/details/90718990

element动态合并行和列相关推荐

hutool 导出复杂excel(动态合并行和列)
实现效果: 基础表格导出:其中的查询及实体类未贴出,白嫖党请自行修改导出数据及表头 public void excelExport(@RequestBody QueryAttendanceStatis ...
element ui 表格合并行和列
element ui 表格合并行和列 <el-table:data="tableData":span-method="arraySpanMethod"bo ...
element table表格合并行和列
element-ui 官网案例: table合并行或列通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列column.当前行号row ...
JS给table动态添加行和列
效果图: input为动态添加 <botton onclick="AddTableCell()">添加一列</botton><table id=&qu ...
使用jquery实现table表格的动态添加行和列
<table class="table" border="1px" cellspacing="0" cellpadding=" ...
动态合并Repeater控件数据列
前天Insus.NET实现<动态合并GridView数据行DataRow的列>.今天再玩玩Repeater控件,功能也是动态合并某列栏位. Repeater控件跟GridView控件一样集 ...
element表格攻略大全,表头合并,表格合并,动态添加一列
elementui表格攻略大全,表头合并,表格合并,动态添加一列 element合并表头与合并表格,需求就是这样,数据结构中需要有一个大类集合,由于数据结构是我定的,图二是这个表格的数据结构 [{fu ...
VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
vue element ui合并表格（合并某列的行数据）
需求:按需合并某些列的数据自定义数据: tableData:[ { num:0, new_subject_name:"new_subject_name1", count1:&qu ...

element动态合并行和列

element动态合并行和列相关推荐

最新文章

热门文章