【el-table的表格宽度自适应】

文章目录

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

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

一、js代码

// 自适应表格列宽 str为prop tableData为表格数据数组 flexWidth为自定义宽度用来适应自己的表格exportfunctionflexColumnWidth(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 =0for(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}elseif(char >='\u4e00'&& char <='\u9fa5'){// 如果是中文字符，为字符分配15个单位宽度
            flexWidth +=15}else{// 其他种类字符，为字符分配8个单位宽度
            flexWidth +=8}}if(flexWidth <80){// 设置最小宽度
        flexWidth =80}// if (flexWidth > 250) {//   // 设置最大宽度//   flexWidth = 250// }return flexWidth +'px'}

二、使用

代码如下（示例）：

import { flexColumnWidth } from "@/utils/common";...
methods:{flexColumnWidth(a, b){returnflexColumnWidth(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)"/>