iview+vue 表格任一项实现鼠标划上显示内容

  在新版本的iview中，表格新增了tooltip功能：

 

  但做项目时并不是新的iview版本，又不想升级，如何才能实现当内容过多鼠标划上显示内容？下边是我做项目时的改动：

 

 {
          // fixed: 'left',
          title: '编码',
          align: 'center',
          key: 'code',
          minWidth: 150,
          maxWidth: 170,
          ellipsis: true,
          render: (h, params) => {
            return h('Tooltip', {
                props: { 
                  content:this.data[params.index].code,
                  placement: 'top' 
                }
            },this.data[params.index].code)
          }
        },
        {
          title: '名称',

 

  提交之后发现，未显示全部内容，仔细检查发现是内容超出了，与背景颜色相同而不容易看出来：

于是修改了一下代码：

 

 {
          // fixed: 'left',
          title: '编码',
          align: 'center',
          key: 'code',
          minWidth: 150,
          maxWidth: 170,
          ellipsis: true,
          render: (h, params) => {
            return h('Tooltip', {
                props: { placement: 'top' }
            }, [
              this.data[params.index].code,
                h('span', { 
                  slot: 'content', 
                  style: {
                     whiteSpace: 'normal',
                      wordBreak: 'break-all' 
                    }
                 },this.data[params.index].code)
            ])
          }
        },
        {
          title: '名称',

就可以达到目的了（为了节省空间也就不上图了）。

原因：显示内容超出的是因为tooltip默认为单行显示，通过设置多行显示即可。

总结：

　在使用iview 的table组件时，要注意render和renderHeader的作用与重要性。