目的：根據(jù)表格內(nèi)容的長短來進行表格寬度的調(diào)整

el-tale組件在表頭中只提供了一個width屬性來控制表格的寬度，如果將其寫死，則會針對過長的內(nèi)容可能會有溢出換行、針對過短的內(nèi)容可能會出現(xiàn)占位過多，所以就寫了一個js文件來根據(jù)字符的長短來返回相應(yīng)的寬度。

一、js代碼

// 自適應(yīng)表格列寬 str為prop tableData為表格數(shù)據(jù)數(shù)組 flexWidth為自定義寬度用來適應(yīng)自己的表格
export function flexColumnWidth(str, tableData,flexWidth, flag = 'max') {
    // str為該列的字段名(傳字符串);tableData為該表格的數(shù)據(jù)源(傳變量);
    // flag為可選值，可不傳該參數(shù),傳參時可選'max'或'equal',默認為'max'
    // flag為'max'則設(shè)置列寬適配該列中最長的內(nèi)容,flag為'equal'則設(shè)置列寬適配該列中第一行內(nèi)容的長度。
    str = str + ''
    let columnContent = ''
    if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {
        return
    }
    if (!str || !str.length || str.length === 0 || str === undefined) {
        return
    }
    if (flag === 'equal') {
        // 獲取該列中第一個不為空的數(shù)據(jù)(內(nèi)容)
        for (let i = 0; i < tableData.length; i++) {
            if (tableData[i][str].length > 0) {
                // console.log('該列數(shù)據(jù)[0]:', tableData[0][str])
                columnContent = tableData[i][str]
                break
            }
        }
    } else {
        // 獲取該列中最長的數(shù)據(jù)(內(nèi)容)
        let index = 0
        for (let i = 0; i < tableData.length; i++) {
            if (tableData[i][str] === null) {
                tableData[i][str]=''
            }
            const now_temp = tableData[i][str] + ''
            const max_temp = tableData[index][str] + ''
            if (now_temp.length > max_temp.length) {
                index = i
            }
        }
        columnContent = tableData[index][str]
    }
    // console.log('該列數(shù)據(jù)[i]:', columnContent)
    // 以下分配的單位長度可根據(jù)實際需求進行調(diào)整
    for (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) {
        // 設(shè)置最小寬度
        flexWidth = 80
    }
    // if (flexWidth > 250) {
    //   // 設(shè)置最大寬度
    //   flexWidth = 250
    // }
    return flexWidth + 'px'
}

二、使用

代碼如下（示例）：文章來源地址http://www.zghlxwxcb.cn/news/detail-589556.html

import { flexColumnWidth } from "@/utils/common";
...
methods: {
	flexColumnWidth(a, b){
      	return flexColumnWidth(a, b,this.windowWidth/20)
      	//此處的this.windowWidth一般為屏幕寬度，從而達到自適應(yīng)效果
    },
}
...
<el-table-column
label="行政區(qū)劃"
align="left"
key="gridName"
prop="gridName"
v-if="columns[0].visible"
:width="flexColumnWidth('gridName',patrolList)"
/>

到了這里，關(guān)于【el-table的表格寬度自適應(yīng)】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！