element ui實現複雜動態表頭

2021-10-23 10:21:01 字數 1624 閱讀 8487

製作乙個不同省份不同業務的的統計報表。如下圖:

動態表頭只需要在v-for迴圈即可,但是在多層迴圈中,prop屬性的賦值卻讓我試了半天,希望能幫到有需要的小夥伴,最終**如下:

:data

="datalist"

width

="1200"

show-summary

:summary-method

="getsummaries"

v-if

="datalist.length !== 0"

max-height

="550"

>

align

="center"

label

="全國省份統計"

>

align

="center"

label

="省份"

prop

="provincename"

>

el-table-column

>

align

="center"

:label

="brand.brandname"

v-for

="(brand,bindex) in datalist[0].brandlist"

:key

="bindex"

>

align

="center"

:label

="business.businame"

v-for

="(business,cindex) in brand.busilist"

:key

="cindex"

>

align

="center"

label

="線上"

>

align

="center"

label

="a"

:prop="

'brandlist.'+bindex+'.busilist.'+cindex+'.onlineactivitotal'

">

el-table-column

>

align

="center"

label

="線下"

>

el-table-column

>

align

="center"

label

="b"

:prop="

'brandlist.'+bindex+'.busilist.'+cindex+'.total'

">

el-table-column

>

el-table-column

>

el-table-column

>

el-table-column

>

el-table

>

element ui動態換膚

通過在elementui的框架基礎上使用colorpicker顏色選擇器進行動態換膚,多餘的話就不說了下述 能夠直接使用。動態換膚效果圖 展示詳情 el button dark content placement bottom v model theme class theme picker siz...

elementui 動態表頭

最近,在用elementui做乙個動態表頭的功能,把自己開發的流程大概分享一下。首先,我們得了解這個option的作用 這個 option屬性就是繫結我們列表 的模板。通過引入我們寫好的js檔案來構成乙個 這個js檔案我也貼一部分 出來介紹一下 可以看出來,這個column就是我們的列陣列。那麼,做...

ElementUI動態增減表單項

增加新選項 增加新選項 const option export default rules answers options methods 將keys歸位 for let i 0 i this.formdata.optionslist.length i 將答案歸位 單選 this.formdata....