可配置字段型別el table表頭自適應的兩種方案

2021-10-08 01:13:23 字數 2779 閱讀 6648

專案場景:可以選擇展示哪些label的可配置字段型別el-table:

由於要求做中英雙版,因此表頭自適應這個功能尤為重要(有些英文label實在太長了)

(已經把專案頁面塗了馬賽克,不知道還會不會被舉報,新人寫部落格這方面不是很懂(霧))

①理想情況:滿足所有欄位的表頭寬度都能自適應,且如果選擇顯示的字段太少,改為el-table預設的自動拉伸;如果欄位太多,顯示橫向滾動條。

表頭自適應計算width方法:

flexcolumnwidth

(str)

else

let flexwidth =

0for

(const char of str)

else

if(char >=

'\u4e00'

&& char <=

'\u9fa5'

)else}if

(flexwidth <80)

// if (flexwidth > 250)

return flexwidth}},

el-table-column繫結該width方法

prop

="caozuo"

label

="操作"

:width

="flexcolumnwidth('操作')"

v-if

="checkedcitieszi.indexof('操作')!==-1"

show-overflow-tooltip

>

el-table-column

>

el-checkbox繫結判斷調整表頭寬度方法checkwidth

v-model

="checkedcitieszi"

>

v-for

="city in citiezi"

:label

="city"

:key

="city"

@change

="checkwidth"

>

}el-checkbox

>

el-checkbox-group

>

判斷調整表頭寬度方法checkwidth(注意因為有渲染時間所以建議給el-table加上v-loading=「loading」屬性)

checkwidth()

else

this

.loading =

false},

500)

}

初始化判斷標誌widthflage

data()

}

el-tabel繫結id及loading

"mytable"

v-loading

="loading"

>

el-table

>

在初始化**時也要加上表頭自適應判斷方法

mounted()

,500)}

,

②特殊情況:在①的基礎上,如果有多個很短的字段,會出現自適應後小於**框框寬度但是自動拉伸後很長的字段反而被掐住了的特殊情況。這種情況改為次選方案planb,如果自適應後小於**框框寬度,不自動拉伸而改為空白部分用空白列填充.

在el-table的末尾加上空白列

label="

" v-if

="blankshow"

>

el-table-column

>

初始化空白列是否出現的判斷標誌

data()

}

判斷調整表頭寬度方法checkwidth去掉一層判斷

flexcolumnwidth

(str)

let flexwidth =

0for

(const char of str)

else

if(char >=

'\u4e00'

&& char <=

'\u9fa5'

)else}if

(flexwidth <80)

// if (flexwidth > 250)

return flexwidth

},

判斷調整表頭寬度方法checkwidth稍作修改,不使用widthflag改為控制blankshow

// **初始化以及選擇配置欄位後觸發,檢查是否使用表頭自適應方法,控制用於填充的空白列是否show,是否出現橫向滾動條

checkwidth()

else

this

.loading =

false},

500)

}

smile and let everyone know that today you』re a lot stronger than you were yesterday.用微笑告訴世人,今天的你比昨天更加強大。

oracle表中字段型別選擇

在熟係公司oracle資料庫時碰到了 去查了下網上已經有很好的解釋 nvarchar2在計算長度時和字符集相關的,例如資料庫是中文字符集時以長度10為例,則 1 nvarchar2 10 是可以存進去10個漢字的,如果用來存英文也只能存10個字元。2 而varchar2 10 的話,則只能存進5個漢...

Access sql語句建立表及字段型別

access sql語句建立表及字段型別 建立一張空表 sql create table 表名 建立一張有字段的表 sql create table 表名 欄位名1 memo not null,欄位名2 memo,欄位名3 counter not null,欄位名4 datetime,欄位名5 te...

Oracle修改表字段以及表型別

win7 oracle pl sql 一張表 lyz emp 建立表lyz emp create table lyz emp e id number 10 not null e oldname varchar2 2 not null primary key e id 測試表lyz emp是否建立成功...