這里我首先介紹?iview 在 Table 組件中的 Render 寫法。

通過給?columns?數(shù)據(jù)的項(xiàng)，設(shè)置一個(gè)函數(shù)?render，可以自定義渲染當(dāng)前列，包括渲染自定義組件，它基于 Vue 的 Render 函數(shù)。

render?函數(shù)傳入兩個(gè)參數(shù)，第一個(gè)是 h，第二個(gè)是對象，包含?row、column?和?index，分別指當(dāng)前單元格數(shù)據(jù)，當(dāng)前列數(shù)據(jù)，當(dāng)前是第幾行。

下面通過添加 div 標(biāo)簽，設(shè)置 div 標(biāo)簽寬度以及 CSS 樣式實(shí)現(xiàn)。

{
  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函數(shù)（截取字符串）

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

?