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
  }
},