情景一：例如首列按照內容自適應展開，其余列有各自的比例。
注意點：

• 給需要自適應展開的列加 :width="flexColumnWidth"計算方法 就可以自適應展開
• 需要給余下所有的列都設置 width=“auto” min-width=“10%” 比例 比例可以不一樣
• 余下的列會按照自己比例和其他列比例 進行對比 然后分配余下的寬度
• 如果不給余下列設置比例 那么余下所有列會自動適應相同比例 超出列表寬度會有滾動條
  

情景二：這是不設置比例的 余下列會平分寬度

以下代碼可以直接復制使用：
這是給余下列設置了比例的代碼

<template><div style="width:1000px;"><el-table border :data="tableData" fit style="width: 100%"><!-- :width="flexColumnWidth('string',tableData)" --><el-table-column label="文字" :width="flexColumnWidth('string',tableData)"><template slot-scope="scope"><el-input v-model="scope.row.string"></el-input></template></el-table-column><el-table-column prop="name" label="姓名" width="auto" min-width="20%"></el-table-column><el-table-column prop="a" label="a" width="auto" min-width="10%"></el-table-column><el-table-column prop="b" label="b" width="auto" min-width="10%"></el-table-column><el-table-column prop="c" label="c" width="auto" min-width="10%"></el-table-column><el-table-column prop="d" label="d" width="auto" min-width="10%"></el-table-column><el-table-column prop="e" label="e" width="auto" min-width="5%"></el-table-column><el-table-column prop="f" label="f" width="auto" min-width="5%"></el-table-column><el-table-column prop="address" label="地址" width="auto" min-width="20%"></el-table-column></el-table></div> </template><script>export default {data () {return {tableData: [{string: '20%', name: '20%', a: '10%', b: '10%', c: '10%', d: '10%', e: '5%', f: '5%', address: '20%'},{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') {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][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// }// 可以再多留部分的paddingflexWidth += 30return flexWidth + 'px'}} } </script>

總結

以上是生活随笔為你收集整理的el-table某列的列宽自适应，其他列按比例分配。的全部內容，希望文章能夠幫你解決所遇到的問題。

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