美文网首页
vxe-table 一行数据显示2行内容

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

作者: JeasonWeb | 来源:发表于2023-02-22 08:21 被阅读0次

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

相关文章

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

    1.需求: 售后功能实现 1.1 需要一行内容显示到2行中展示。 PS: 前端框架 vue + vxe-table...

  • css div 内容一行显示

    div 内容超出后仍然一行显示, 自动显示横向滚动条 注意 在 Vue 项目中, 数据动态绑定后, 如果超出内容宽...

  • kali linux 查看文件内容

    1. 文件内容查看 从第一行开始显示内容 cat 文件名从最后一行开始显示内容 tac 文件名显示内容同时输出行号...

  • linux查看文件内容命令

    cat 由第一行开始显示内容,并将所有内容输出 tac 从最后一行倒序显示内容,并将所有内容输出 m...

  • 2018-08-20

    linux command cat:由第一行开始显示文件内容 tac:由最后一行开始显示文件内容 nl:显示的时候...

  • Linux 下查看文件内容的命令

    查看文件内容的命令: cat 由第一行开始显示内容,并将所有内容输出 tac 从最后一行倒序显示内容,并将所有内容...

  • 安卓使用RecyclerView一行显示多条数据

    背景 平常使用RecyclerView时,都是一行一行显示数据,但是某些场景下,我们需要一行显示多条数据. 效果图...

  • Linux下查看文件内容的命令

    查看文件内容的命令: cat 由第一行开始显示内容,并将所有内容输出 tac 从最后一行倒序显示内...

  • 04-Linux基础2

    一、常用命令 cat查看文件内容(从第一行显示到最后一行) tac查看文件内容(从最后一行显示到第一行) head...

  • 04-Linux基础2

    一、常用命令 cat查看文件内容(从第一行显示到最后一行) tac查看文件内容(从最后一行显示到第一行) head...

网友评论

      本文标题:vxe-table 一行数据显示2行内容

      本文链接:https://www.haomeiwen.com/subject/vrxakdtx.html