赞
踩
通过给table
传入span-method
方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row
、当前列column
、当前行号rowIndex
、当前列号columnIndex
四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan
,第二个元素代表colspan
。 也可以返回一个键名为rowspan
和colspan
的对象。
- <el-table
- :data="tableData"
- :span-method="objectSpanMethod"
- border
- style="width: 100%">
- <el-table-column
- prop="id"
- label="ID"
- width="180">
- </el-table-column>
- <el-table-column
- prop="name"
- label="姓名">
- </el-table-column>
- <el-table-column
- prop="amount1"
- sortable
- label="数值 1">
- </el-table-column>
- <el-table-column
- prop="amount2"
- sortable
- label="数值 2">
- </el-table-column>
- <el-table-column
- prop="amount3"
- sortable
- label="数值 3">
- </el-table-column>
- </el-table>
1. 有4个参数返回:row,column,rowIndex,columnIndex;
row和column是表格的行和列,里面是当前行和列的值,也就是tableData里的值,
rowIndex,columnIndex是当前行和列的序号
- objectSpanMethod({ row, column, rowIndex, columnIndex }) {
- if (columnIndex === 0) { //用于设置要合并的列
- if (rowIndex % 2 === 0) { //用于设置合并开始的行号
- return {
- rowspan: 2, //合并的行数
- colspan: 1 //合并的列数,设为0则直接不显示
- };
- } else {
- return {
- rowspan: 0,
- colspan: 0
- };
- }
- }
- }
2.表格合并行和列注释 if (rowIndex % 2 === 0) { // 用于设置合并开始的行号
- if (columnIndex === 0) {
- if (rowIndex === 0) { // 合并第一行到第四行,从第一行开始,共4行
- return {
- rowspan: 4,
- colspan: 1
- }
- } else if (rowIndex === 4) { // 合并第五行到第九行,从第五行开始,共5行
- return {
- rowspan: 5,
- colspan: 1
- }
- } else if (rowIndex === 9) { // 合并第10行到第14行,从第10行开始,共5行
- return {
- rowspan: 5,
- colspan: 1
- }
- } else { // 其余被合并的行,诸如1、2、3、5、6、7、8、10、11、12、13全都设为0
- return {
- rowspan: 0,
- colspan: 0
- }
- }
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。