一、概述
Element UI 是 PC 端比較流行的 Vue.js UI 框架，它的組件庫基本能滿足大部分常見的業務需求。但有時候會有一些定制性比較高的需求，組件本身可能沒辦法滿足。最近在項目里就碰到了。
很多頁面都需要用到表格組件el-table。如果沒有給el-table-column指定寬度，默認情況下會平均分配給剩余的列。在列數比較多的情況，如果el-table寬度限定在容器內，單元格里的內容就會換行。強制不換行，內容要么在單元格內滾動，要么就會溢出或被截斷。
產品想要的效果是：內容保持單行顯示，列間距保持一致，表格超出容器允許水平滾動。el-table-column是支持設置固定寬度的，在內容寬度可預知的情況下，也能滿足這個需求。問題就在於如何讓列寬動態適應內容的寬度。在官方文檔也沒找到這樣的選項，應該是組件本身不支持。
二、技術實現
通過插件v-fit-columns即可實現，列寬自適應。
安裝插件
npm install v-fit-columns --save
引入
import Vue from 'vue'; import Plugin from 'v-fit-columns'; Vue.use(Plugin);
使用示例：
<el-table v-fit-columns> <el-table-column label="No." type="index" class-name="leave-alone"></el-table-column> <el-table-column label="Name" prop="name"></el-table-column> <el-table-column label="Age" prop="age"></el-table-column> </el-table>
在el-table后面加v-fit-columns即可，其他的都不需要改。
先來看一下原始的table效果：
發現內容過多，已經開始換行了。
下面使用v-fit-columns
test.vue
<template>
<div>
<el-table v-fit-columns
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="phone"
label="手機號碼">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
prop="describe"
label="描述">
</el-table-column>
</el-table>
</div>
</template>
<script>
import Vue from 'vue';
import Plugin from 'v-fit-columns';
Vue.use(Plugin);
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
phone:12345678910,
address: '上海市普陀區金沙江路 1518 弄',
describe:'松江區，位於上海市西南部，歷史文化悠久，有着“上海之根” 的稱呼。位於黃浦江上游，東與閔行區、奉賢區為鄰，南、西南與金山區交界，西、北與青浦區接壤'
}, {
date: '2016-05-04',
name: '王小虎',
phone:12345678910,
address: '上海市普陀區金沙江路 1517 弄FDSA',
describe:'徐匯區，上海市轄區，位於上海中心城區的西南部，東北側與黃浦區毗鄰，東臨黃浦江，與浦東新區隔江相望，西與閔行區分界，北與靜安區、長寧區接壤。',
}, {
date: '2016-05-01',
name: '王小虎',
phone:12345678910,
address: '上海市普陀區金沙江路 1519 弄54YGFDSF',
describe:'浦東新區為上海市的一個市轄區，因地處黃浦江東而得名。浦東南與奉賢區、閔行區兩區接壤，西與徐匯區、黃浦區、虹口區、楊浦區、寶山區五區隔黃浦江相望，北與崇明區隔長江相望；地勢東南高，西北低，氣溫偏高、降水偏多、日照時數偏少'
}, {
date: '2016-05-03',
name: '王小虎',
phone:12345678910,
address: '上海市普陀區金沙江路 1516 弄',
describe:'黃浦區，隸屬於上海市，地處黃浦江和蘇州河合流處的西南端。北起蘇州河，東、南瀕黃浦江，西至成都北路、延安中路、陝西南路、肇嘉浜路、瑞金南路。'
}]
}
},
methods:{
}
}
</script>
<style scoped>
</style>
刷新頁面，效果如下：
可以看到，table下面出現了一個滾動條，可以向左向右拉動。
本文參考鏈接：
https://www.cnblogs.com/lzkwin/p/13575805.html