ITPub博客

首页 > 应用开发 > IT综合 > 思路:element 表格组件自适应

思路:element 表格组件自适应

原创 IT综合 作者:千锋Python唐小强 时间:2020-05-26 18:02:24 0 删除 编辑

项目涉及大量表格 估算 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(/[\\u4e00-\\u9fa5]/g)&&str. match(/[\\u4e00-\\u9fa5]/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'
               }
           })
       }


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69923331/viewspace-2694490/,如需转载,请注明出处,否则将追究法律责任。

全部评论

注册时间:2019-05-14

  • 博文量
    921
  • 访问量
    489894