element 表格宽度自适应_思路:element 表格组件自适应

项目涉及大量表格 估算 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'                }            })        }
7aa3e8c03a306c82b613c06c67319bc0.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值