前言：最近做项目中表格偏多，而且要展示的字段大部分都很长，在要求将信息完全展示的同时又要保持界面的美观整洁的情况下，我给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)
              ])
          }
        }

2.Tootip成功折行显示，但是表格上的数据值超出字段设定宽度后就被边框遮挡，有时甚至单个字体会被遮挡一半，显示非常难看，于是在render中加入了一段方法,成功实现了在render函数中添加Tooltip折行显示，并使表格显示数据超出部分用"..."显示的效果

        {
          title: 'title',
          key: 'key',
          align: 'center',
          ellipsis: true,
          width: 150,
          render: (h, params) => {
            let texts = '';                                       //表格列显示文字
            if (params.row.key!== null) {
              if (params.row.key.length > 6) {                    //进行截取列显示字数
                texts = params.row.key.substring(0, 6) + "...";
              } else {
                texts = params.row.key;
              }
            }
            return h('Tooltip', {
              props: {
                placement: 'top'
              }
            }, [
                texts,
                h('span', {
                  slot: 'content',
                  style: {
                    whiteSpace: 'normal',
                    wordBreak: 'break-all'
                  }
                }, params.row.key)
              ])
          }
        },

本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。