有时候我们在渲染列表的时候可能数据展示需要用到单元格的合并问题,
对于单元格的合并如果后台返回给我们的数据如下:
假如说总共10行,如果把第1,2,3行合并,4,5,6行合并,7,8,9,10行合并,那么可以声明一个变量的值为[3,0,0,3,0,0,4,0,0,0],这个变量是根据tableData得来的,怎么得这里就不再赘述了
tableData: [
{
id:0,
quotaName: ‘性别配额’,
questionName: ‘您的性别是?’,
options: ‘男’,
progress: ‘30’,
}, {
id:0,
quotaName: ‘性别配额’,
questionName: ‘您的性别是?’,
options: ‘女’,
progress: ‘40’,
}, {
id:0,
quotaName: ‘性别配额’,
questionName: ‘您的性别是?’,
options: ‘女’,
progress: ‘40’,
},{
id:1,
quotaName: ‘其他配额’,
questionName: ‘您的年龄是?’,
options: ‘29’,
progress: ‘16’,
}, {
id:1,
quotaName: ‘其他配额’,
questionName: ‘您的年龄是?’,
options: ‘10’,
progress: ‘2’,
},
{
id:1,
quotaName: ‘其他配额’,
questionName: ‘您的年龄是?’,
options: ‘10’,
progress: ‘2’,
},
{
id:2,
quotaName: ‘其他配额’,
questionName: ‘您的常驻地址’,
options: ‘上海’,
progress: ‘4’,
},
{
id:2,
quotaName: ‘其他配额’,
questionName: ‘您的常驻地址’,
options: ‘上海’,
progress: ‘4’,
},
{
id:2,
quotaName: ‘其他配额’,
questionName: ‘您的常驻地址’,
options: ‘上海’,
progress: ‘4’,
},
{
id:2,
quotaName: ‘其他配额’,
questionName: ‘您的常驻地址’,
options: ‘上海’,
progress: ‘4’,
}
]
而在table结构上我们需要定义span-method方法,如下:
<el-table :data="tableData" :span-method="objectSpanMethod" border></table>
接下来是我们去在objectSpanMethod
方法中写我们的函数,如下:
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
debugger;
//合并第一列和第二列
if (columnIndex == 0||columnIndex == 1) {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},
这样处理以后就可以得到上图中的效果,无论后台返回给的数据有多少,都可以动态的处理,亲测可用。