Vue+iview的表格插件在render函数中使用Tooltip文字提示时，文字超出字段长度后被遮挡显示不完全与Tooltip折行问题的解决

最新推荐文章于 2023-12-20 13:55:38 发布

原创

最新推荐文章于 2023-12-20 13:55:38 发布 · 9.2k 阅读

8 ·

CC 4.0 BY-SA版权

转载请注明出处

文章标签：

#Vue #iview

前言：最近做项目中表格偏多，而且要展示的字段大部分都很长，在要求将信息完全展示的同时又要保持界面的美观整洁的情况下，我给Table的每个字段都做了宽度限制(同时也是为了适应不同分辨率下显示不受影响)，这样就需要在指定的宽度内显示指定的数据长度，超出的长度隐藏，在Tooltip中完全展示.

1.最初我是直接在render中加了Tooltip并且,发现Tooltip确实实现了展示完整数据的功能，但是并没有折行显示，于是用下面的方法使Tooltip折行

      
       {
          title: 'title',
          key: 'key',
          align: 'center',
          ellipsis: true,                      //超出长度时用...显示
          width: 150,
          render: (h, params) => {
            return h('Tooltip', {
              props: {
                placement: 'top'
              }
            }, [
                params.row.key,
                h('span', {
                  slot: 'content',             //slot属性
                  style: {
                    whiteSpace: 'normal',
                    wordBreak: 'break-all'
                  }
                }, params.row.key)
              ])