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

2023-02-22  本文已影响0人  JeasonWeb

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

上一篇 下一篇

猜你喜欢

热点阅读