情景一：例如首列按照內(nèi)容自適應(yīng)展開，其余列有各自的比例。
注意點(diǎn)：

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

情景二：這是不設(shè)置比例的 余下列會(huì)平分寬度

以下代碼可以直接復(fù)制使用：
這是給余下列設(shè)置了比例的代碼

<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: '上海市普陀區(qū)金沙江路 1517 弄'},{string: '條件他又長又短的的女分的看到偶爾偶爾餓哦偶爾分佛開口分配佛分富婆看哦考配哦', name: '王小虎', a: '111111', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀區(qū)金沙江路 1519 弄'},{string: '條件他又長又看到配佛分富婆看哦考配哦', name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '123456789'}]}},methods: {// 自適應(yīng)表格列寬flexColumnWidth (str, arr1, flag = 'max') {console.log(str)// str為該列的字段名(傳字符串);tableData為該表格的數(shù)據(jù)源(傳變量);// flag為可選值，可不傳該參數(shù),傳參時(shí)可選'max'或'equal',默認(rèn)為'max'// flag為'max'則設(shè)置列寬適配該列中最長的內(nèi)容,flag為'equal'則設(shè)置列寬適配該列中第一行內(nèi)容的長度。str = str + ''let columnContent = ''if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {return '80px' // 給個(gè)默認(rèn)的}if (!str || !str.length || str.length === 0 || str === undefined) {return '80px' // 給個(gè)默認(rèn)的}if (flag === 'equal') {// 獲取該列中第一個(gè)不為空的數(shù)據(jù)(內(nèi)容)for (let i = 0; i < arr1.length; i++) {if (arr1[i][str].length > 0) {// console.log('該列數(shù)據(jù)[0]:', arr1[0][str])columnContent = arr1[i][str]break}}} else {// 獲取該列中最長的數(shù)據(jù)(內(nèi)容)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('該列數(shù)據(jù)[i]:', columnContent)// 以下分配的單位長度可根據(jù)實(shí)際需求進(jìn)行調(diào)整let flexWidth = 0for (const char of columnContent) {if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {// 如果是英文字符，為字符分配8個(gè)單位寬度flexWidth += 8} else if (char >= '\u4e00' && char <= '\u9fa5') {// 如果是中文字符，為字符分配15個(gè)單位寬度flexWidth += 15} else {// 其他種類字符，為字符分配8個(gè)單位寬度flexWidth += 8}}if (flexWidth < 80) {// 設(shè)置最小寬度flexWidth = 80}// if (flexWidth > 250) {// // 設(shè)置最大寬度// flexWidth = 250// }// 可以再多留部分的paddingflexWidth += 30return flexWidth + 'px'}} } </script>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。