【el-table的表格宽度自适应】-Toy模板网

这篇具有很好参考价值的文章主要介绍了【el-table的表格宽度自适应】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目的：根据表格内容的长短来进行表格宽度的调整

el-tale组件在表头中只提供了一个width属性来控制表格的宽度，如果将其写死，则会针对过长的内容可能会有溢出换行、针对过短的内容可能会出现占位过多，所以就写了一个js文件来根据字符的长短来返回相应的宽度。

一、js代码

// 自适应表格列宽 str为prop tableData为表格数据数组 flexWidth为自定义宽度用来适应自己的表格
export function flexColumnWidth(str, tableData,flexWidth, flag = 'max') {
    // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
    // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
    // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
    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') {
        // 获取该列中第一个不为空的数据(内容)
        for (let i = 0; i < tableData.length; i++) {
            if (tableData[i][str].length > 0) {
                // console.log('该列数据[0]:', tableData[0][str])
                columnContent = tableData[i][str]
                break
            }
        }
    } else {
        // 获取该列中最长的数据(内容)
        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('该列数据[i]:', columnContent)
    // 以下分配的单位长度可根据实际需求进行调整
    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) {
        // 设置最小宽度
        flexWidth = 80
    }
    // if (flexWidth > 250) {
    //   // 设置最大宽度
    //   flexWidth = 250
    // }
    return flexWidth + 'px'
}

二、使用

代码如下（示例）：文章来源地址https://www.toymoban.com/news/detail-589556.html

import { flexColumnWidth } from "@/utils/common";
...
methods: {
	flexColumnWidth(a, b){
      	return flexColumnWidth(a, b,this.windowWidth/20)
      	//此处的this.windowWidth一般为屏幕宽度，从而达到自适应效果
    },
}
...
<el-table-column
label="行政区划"
align="left"
key="gridName"
prop="gridName"
v-if="columns[0].visible"
:width="flexColumnWidth('gridName',patrolList)"
/>