原文鏈接

重點就一個方法 :width="flexColumnWidth(‘date’,tableData)"
第一個參數是這個列的字段
第二個參數是這個表格的數據
只需要給對應的列 el-table-column 標簽加上此方法 即可做到此列自適應
其他的列想要自適應寬度 同樣使用 :width 方法即可

此段代碼可直接復制使用：

這是情景一：

• 需要自適應寬度的數據string，直接是在數組每一項下

<template><div style="width:1400px;"><el-table border :data="tableData" fit style="width: 100%"><el-table-column label="日期" :width="flexColumnWidth('string',tableData)"><template slot-scope="scope"><span>{{ scope.row.string }}</span></template></el-table-column><el-table-column prop="a" label="a"></el-table-column><el-table-column prop="b" label="b"></el-table-column><el-table-column prop="c" label="c"></el-table-column><el-table-column prop="d" label="d"></el-table-column><el-table-column prop="e" label="e"></el-table-column><el-table-column prop="f" label="f"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div> </template><script>export default {data () {return {tableData: [{string: '條件他又長又短的', name: '王小虎', a: '12', b: '211', c: '11111111', d: '1', e: 11, f: '122', address: '上海市普陀區金沙江路 1518 弄'},{string: '一二三四五六七八九十', name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀區金沙江路 1517 弄'},{string: '條件他又長又短的的女分的看到偶爾偶爾餓哦偶爾分佛開口分配佛分富婆看哦考配哦', name: '王小虎', a: '111111', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀區金沙江路 1519 弄'},{string: '條件他又長又看到配佛分富婆看哦考配哦', name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '123456789'}]}},methods: {// 自適應表格列寬flexColumnWidth (str, arr1, flag = 'max') {// str為該列的字段名(傳字符串);tableData為該表格的數據源(傳變量);// flag為可選值，可不傳該參數,傳參時可選'max'或'equal',默認為'max'// flag為'max'則設置列寬適配該列中最長的內容,flag為'equal'則設置列寬適配該列中第一行內容的長度。str = str + ''let columnContent = ''if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {return}if (!str || !str.length || str.length === 0 || str === undefined) {return}if (flag === 'equal') {// 獲取該列中第一個不為空的數據(內容)for (let i = 0; i < arr1.length; i++) {if (arr1[i][str].length > 0) {// console.log('該列數據[0]:', arr1[0][str])columnContent = arr1[i][str]break}}} else {// 獲取該列中最長的數據(內容)let index = 0for (let i = 0; i < arr1.length; i++) {if (arr1[i][str] === null) {return}const now_temp = arr1[i][str] + ''const max_temp = arr1[index][str] + ''if (now_temp.length > max_temp.length) {index = i}}columnContent = arr1[index][str]}// console.log('該列數據[i]:', columnContent)// 以下分配的單位長度可根據實際需求進行調整let flexWidth = 0for (const char of columnContent) {if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {// 如果是英文字符，為字符分配8個單位寬度flexWidth += 8} else if (char >= '\u4e00' && char <= '\u9fa5') {// 如果是中文字符，為字符分配15個單位寬度flexWidth += 15} else {// 其他種類字符，為字符分配8個單位寬度flexWidth += 8}}if (flexWidth < 80) {// 設置最小寬度flexWidth = 80}// if (flexWidth > 250) {// // 設置最大寬度// flexWidth = 250// }return flexWidth + 'px'}} } </script>

這是情景二：

• 我們要自適應的這個列的數據字段 嵌套了一層 是在tableData每一個對象下的obj1對象里
• 此時就需要將 flexColumnWidth 方法的 取值方式修改下，直接修改成 arr1[i]['obj1']['string']和arr1[index]['obj1']['string']，既去取每一項對象下obj1下的string。
  
  

代碼可以直接復制使用：

<template><div style="width:1300px;"><el-table border :data="tableData" fit style="width: 100%"><el-table-column label="文字" :width="flexColumnWidth('string',tableData)"><template slot-scope="scope"><el-input v-model="scope.row.obj1.string"></el-input></template></el-table-column><el-table-column prop="a" label="a"></el-table-column><el-table-column prop="b" label="b"></el-table-column><el-table-column prop="c" label="c"></el-table-column><el-table-column prop="d" label="d"></el-table-column><el-table-column prop="e" label="e"></el-table-column><el-table-column prop="f" label="f"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div> </template><script>export default {data () {return {tableData: [{obj1: { string: '條件他又長又短的' }, name: '王小虎', a: '12', b: '211', c: '11111111', d: '1', e: 11, f: '122', address: '上海市普陀區金沙江路 1518 弄'},{obj1: { string: '一二三四五六七八九十' }, name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀區金沙江路 1517 弄'},{obj1: { string: '條件他又長又短的的女分的看到偶爾偶爾餓哦偶爾分佛開口分配佛分富婆看哦考配哦' }, name: '王小虎', a: '111111', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀區金沙江路 1519 弄'},{obj1: { string: '條件他又長又看到配佛分富婆看哦考配哦' }, name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '123456789'}]}},methods: {// 自適應表格列寬flexColumnWidth (str, arr1, flag = 'max') {console.log(str)// str為該列的字段名(傳字符串);tableData為該表格的數據源(傳變量);// flag為可選值，可不傳該參數,傳參時可選'max'或'equal',默認為'max'// flag為'max'則設置列寬適配該列中最長的內容,flag為'equal'則設置列寬適配該列中第一行內容的長度。str = str + ''let columnContent = ''if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {return '80px' // 給個默認的}if (!str || !str.length || str.length === 0 || str === undefined) {return '80px' // 給個默認的}if (flag === 'equal') {// 獲取該列中第一個不為空的數據(內容)for (let i = 0; i < arr1.length; i++) {if (arr1[i]['obj1']['string'].length > 0) {// console.log('該列數據[0]:', arr1[0]['obj1']['string'])columnContent = arr1[i]['obj1']['string']break}}} else {// 獲取該列中最長的數據(內容)let index = 0for (let i = 0; i < arr1.length; i++) {if (arr1[i]['obj1']['string'] === null) {return}const now_temp = arr1[i]['obj1']['string'] + ''const max_temp = arr1[index]['obj1']['string'] + ''if (now_temp.length > max_temp.length) {index = i}}columnContent = arr1[index]['obj1']['string']}// console.log('該列數據[i]:', columnContent)// 以下分配的單位長度可根據實際需求進行調整let flexWidth = 0for (const char of columnContent) {if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {// 如果是英文字符，為字符分配8個單位寬度flexWidth += 8} else if (char >= '\u4e00' && char <= '\u9fa5') {// 如果是中文字符，為字符分配15個單位寬度flexWidth += 15} else {// 其他種類字符，為字符分配8個單位寬度flexWidth += 8}}if (flexWidth < 80) {// 設置最小寬度flexWidth = 80}// if (flexWidth > 250) {// // 設置最大寬度// flexWidth = 250// }// 可以再多留部分的paddingflexWidth += 30return flexWidth + 'px'}} } </script>

情景三：在表格的總寬度不夠時候，會出現滾動條 是正常的。此時剩余的每列會自動平均分配獲得相等寬度

情景四：也可以手動給剩余的分配列寬比例

注意是兩種數據結構 兩種方法的細節不一樣！

總結

以上是生活随笔為你收集整理的el-table列宽自适应；el-table表格的列根据内容自动撑满；el-table内容换行问题；的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。