el-table 列宽自适应内容的实现方式

方法 1 安装 af-table-column

el-table 宽度根据内容自适应 占一行

npm install af-table-column

import AFTableColumn from 'af-table-column'

Vue.use(AFTableColumn)


<el-table :data="data" >
  <af-table-column label="姓名" prop="name"></el-table-column>
  <el-table-column label="年龄" prop="age"></el-table-column>
</el-table>

方法 2 根据数据后自己计算宽度

1. 计算文本宽度

getTextWidth (str) { 
    let width = 0
    let html = document.createElement('span')
    html.innerText = str; html.className = 'getTextWidth'            
    document.querySelector('body').appendChild(html)
    width = document.querySelector('.getTextWidth').getBoundingClientRect().width     
    document.querySelector('.getTextWidth').remove()
    return width
}

2. 获取最宽内容的宽度

getMaxLength (arr) { 
    return arr.reduce((acc, item) => { 
        if (item) { 
            let calcLen = this.getTextWidth(item) 
            if (acc < calcLen) { 
                acc = calcLen 
            } 
        } 
       return acc 
    }, 0) 
}

3. 根据自己需要设置不同的宽度

// header 宽度根据 header 内容自适应

this.header = header.map(v => {
    const width = Math.ceil(this.getTextWidth(v.name)) + 30
    return {
        ...v,
        width: width > 80 ? width : 80
    }
})

方法3 根据 v-fit-columns 宽度自适应

import Vue from 'vue'
import Plugin from 'v-fit-columns'
Vue.use(Plugin)

<el-table v-fit-columns>
  <el-table-column label="姓名" prop="name"></el-table-column>
  <el-table-column label="年龄" prop="age"></el-table-column>
</el-table>