项目涉及大量表格 估算 column 宽度实在是太low,所以尝试实现自适应。核心是对数据层进行修改,代码提供参考,大家不必细看,主要是分享思路。
let column = [ {label:"用户id",prop:"userId"}, {label:"用户姓名",prop:"userName"}, {label:"创建日期",prop:"createData"}, ] let data = [ { userId:1, userName:"张三", createData:'2020-05-26 12:10:56' }, { userId:2, userName:"李狗蛋", createData:'2020-05-26 12:10:56' } ] let resolveColumn = _cmptWidth(column,data) console.log(resolveColumn) // [ // {label:"用户id",prop:"userId",width:""}, // {label:"用户姓名",prop:"userName"}, // {label:"创建日期",prop:"createData"}, // ] _cmptWidth(min=30,column,data){ // 字段长度容器 let temp={}; // 根据第一行数据 初始化 字段长度容器 Object.keys(data[0]).forEach(key=>{ temp[key]=[] }) // 将每一行数据的 字段长度 存入 字段长度容器 中文算做2个字符,英文1个 data.map(i=>{ Object.keys(i).forEach(key=>{ let str = i[key] && i[key].toString(); let cn = str && str.match(/[一-龥]/g)&&str.match(/[一-龥]/g).length||0 let en = str && str.match(/[A-Za-z0-9]/g)&&str.match(/[A-Za-z0-9]/g).length||0 let len =Math.max( en + cn*2 + ,10) ; temp[key].push(Math.min(len,min)) }) }) // 返回 添加列宽度属性的 column return column.map(i=>{ let width = Math.ceil(temp[i.prop].reduce((a,b)=>a+b)/rows.length) return { ...i, width:width*12+'px' } }) }