Vue中使用Element组件合并相同列表项
首先可以参考element的官方网站http://element-cn.eleme.io/#/zh-CN/component/table但是这里只是单纯的设置每2行合并一起,并不能自主设置objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {...
·
首先可以参考element的官方网站http://element-cn.eleme.io/#/zh-CN/component/table
但是这里只是单纯的设置每2行合并一起,并不能自主设置
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
对于这里的参数,rowIndex代表的是当前行,columnIndex代表的是当前列。rowspan和colspan分别代表从当前行(列)开始合并多少行。所以如果列表项不是很复杂的且已知的话,可以直接列举法进行合并列表项,如下所示
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex === 0) {
return {
rowspan: 5,
colspan: 1
};
} else if(rowIndex === 5){
return {
rowspan: 8,
colspan: 1
};
}
else if(rowIndex === 13){
return {
rowspan: 6,
colspan: 1
};
}
else if(rowIndex === 19){
return {
rowspan: 1,
colspan: 1
};
}
else{
return {
rowspan: 0,
colspan: 1
};
},
效果如图所示
如果列表项未知则可以进行遍历,将每项和其后一项比较,相同则计数+1。不同则将计数值赋给第一项的rowspan,然后归零,开始下一组的遍历。
更多推荐
已为社区贡献10条内容
所有评论(0)