思路：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(/[\\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'

                }

            })

        }