el-table动态合并行列
作者:互联网
一、场景
根据接口返回数据,将ID相同的数据进行合并。
el-table自带的方法可以固定的合并,但是不能够随机分。
二、思路
通过添加 :span-method="objectSpanMethod" 来自定义合并规则。
方法的参数是一个对象,里面包含当前行row
、当前列column
、当前行号rowIndex
、当前列号columnIndex
四个属性。
该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan
,第二个元素代表colspan
。 也可以返回一个键名为rowspan
和colspan
的对象。
<el-table :data="tableData" :span-method="objectSpanMethod">
<el-table-column prop="id" label="ID"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column> <el-table-column prop="amount1" label="数值 1(元)"> </el-table-column> <el-table-column prop="amount2" label="数值 2(元)"> </el-table-column> </el-table> </div> </template> methods: { objectSpanMethod({ row, column, rowIndex, columnIndex }) { //row:对象形式,保存了当前行的数据 //column:对象形式,保存了当前列的参数 //rowIndex:当前行的行号 //column:当前列的列号 if (columnIndex === 0) { if (rowIndex % 2 === 0) { //%:表示从多少(行)到多少(行)进行合并 return { rowspan: 2, //rowspan:单元格可横跨的行数 colspan: 1 //colspan:单元格可横跨的列数 }; } else { return { rowspan: 0, //等于0表示不合并 colspan: 0 }; } } } }
三、数据处理
<el-table :data="tableData"></eltable>
只能渲染一个数组中保存多条扁平化的对象类型数据,
如果接口返回的数据格式不符合这个
渲染格式需要先处理数据。
tableData: [{ id: '12987122', name: '张三', amount1: '234', amount2: '8', }, { id: '12987123', name: '王李四', amount1: '165', amount2: '9', }]
四、表格合并方法
objectSpanMethod中写的是合并规则。在这之前先找出需要合并的单元格。
通过getSpanArr()
,该方法需要加在页面渲染之前获取列表数据的方法中并传入列表需要渲染的数据作为参数。
//因为要合并的行数是不固定的,此函数实现随意合并行数的功能
getSpanArr(){
this.indexList.forEach((item, index) => { if (index === 0) {
//如果是第一条数据,向数组中加1,占住位置 this.spanArr.push(1) this.position = 0 } else { if (this.indexList[index].parentId === this.indexList[index - 1].parentId) {
//如果parentId相同, 合并行数加1, this.spanArr[this.position] += 1 this.spanArr.push(0) } else {
//数组后移1位 this.spanArr.push(1) this.position = index } } })
}
//实现parentId相同的值合并
objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) { const _row = this.spanArr[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col, } } if (columnIndex === 1) { const _row = this.spanArr[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col, } } },
标签:el,rowspan,columnIndex,rowIndex,colspan,合并,行列,table,row 来源: https://www.cnblogs.com/jiayuexuan/p/15701611.html