1.需求: 售后功能实现
1.1 需要一行内容显示到2行中展示。
PS: 前端框架 vue + vxe-table 3.x
2.实现方式2种方式
2.1 当table不需要分页展示内容时,实现思路如下:
2.1.1 将返回值一行数据复制成2行
=list.map(i=>([i,i])).flat().map((i,index)=>({...i,index}));
2.1.2 将每隔一行数据通过merge-cells属性配置合并列
computed:{
mergeCells()=>{
let lists = [];
for(let i = 0;i < lists.length; i++){
if (i%2===1) {
list.push({
row: i,
col: 1,
rowspan:1,
colspan: column.length,
});
}
}
return lists;
},
},
2.1.3 将rowkey='index'
2.1.4 根据rowindex实现分行展示不同内容
2.2 需要将 头部宽度赋值为特定数值 在第一行使用渲染函数 将所有数据一个个渲染出来,成本太高,且不利于扩展,放弃了。
3.实现 效果 如下图