iview 在 Table 组件中，文字过长用省略号代替，鼠标放上去 Tooltip 文字提示

这里我首先介绍 iview 在 Table 组件中的 Render 写法。

通过给 columns 数据的项，设置一个函数 render，可以自定义渲染当前列，包括渲染自定义组件，它基于 Vue 的 Render 函数。

render 函数传入两个参数，第一个是 h，第二个是对象，包含 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行。

下面通过添加 div 标签，设置 div 标签宽度以及 CSS 样式实现。

{
  title: 'Address',
  key: 'address',
  width: 100,
  render: (h, params) => {
    return h('Tooltip', {
        props: { placement: 'top-start' },
    }, [
      h('div', {
            style: {
                width: '100px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
            }                                    
        }, params.row.address),
        h('span', { 
          slot: 'content', 
          style: { 
            whiteSpace: 'normal', 
            wordBreak: 'break-all' 
          } 
        },params.row.address)
    ])
  }
}

我们也可以通过截取字符串来限制表格中文字显示的长度。

{
  title: 'Address',
  key: 'address',
  width: 100,
  render: (h, params) => {
    return h('Tooltip', {
        props: { placement: 'top-start' },
    }, [
      this.maxSlice(params.row.address),
      h('span', { 
        slot: 'content', 
        style: { 
          whiteSpace: 'normal', 
          wordBreak: 'break-all' 
        } 
      },params.row.address)
    ])
  }
}

maxSlice函数（截取字符串）

maxSlice (v) {
  if (v) {
    return v.length > 20 ? v.slice(0, 20) + "..." : v
  }
},