vxe-table 一行数据显示2行内容

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.实现 效果 如下图

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容