iview表格table某列内容太长，同时用tooltip: true和render冲突的问题

先上改好的效果图：

先说需求问题，服务类型这列我这里收到的是后台返回的数值，不是直接的name，需要在render函数里面用for 循环根据id查找name，然后显示。

但是 最后的值：texts  有些时候太长 超过了 width: 180 ，

所以用 tooltip: 'false'，不能生效，需要换一个思路。

解决办法：截取列显示字数，我这里是显示7位字符串。

然后鼠标悬浮的时候显示所有的name，

解决办法：

大功告成，全部代码如下：

        {title: '服务类型', key: 'serviceType', width: 180, align: 'center',
          render: (h, params) => {
            let texts = '';
            let texts1 = '';
            for (let i = 0; i < letter.M405.length; i++) {
              if (params.row.serviceType === letter.M405[i].itemValue) { 
                texts = letter.M405[i].itemName;
              }
            }

            if (texts.length > 7) { //进行截取列显示字数
              texts1 = texts.substring(0, 7) + "...";
            } else {
              texts1 = texts;
            }
            return h('Tooltip', {
              props: {
                placement: 'bottom'
              }
            }, [
              texts1, // table表格显示
              h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal',
                  wordBreak: 'break-all'
                }
              }, texts) //Tooltip 显示
            ])
          }
        },

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140