如何動態渲染elementUI table的行和列

2021-09-10 07:51:07 字數 3515 閱讀 6924

高階寫在最後

近日專案中遇到這樣乙個需求：需要動態渲染乙個列表的行和列，官網給出的例子大多是列寫死的，行動態生成的，但是如何實現動態渲染行和列呢？後來我查詢了一下實現了該功能，如下我將總結一下然後貼上**。

talk is cheap,show me the code:



="retained"


>


="datalist countfont"


>


border


:data=


"datalist"


style=


"width: 100%;"


>


:show-overflow-tooltip=


"true"


prop=


"data"


width=


"180"


>


"scope" style=


"text-align: left"


>


}<


/span>


<


/template>


<


/el-table-column>


sortable=


"custom"


min-width=


"180"


v-for=


"col in cols"


:prop=


"col.prop"


:label=


"col.label"


>


<


/el-table-column>


<


/el-table>


"addcols"


>


新增一列


<


/el-button>


<


/div>


<


/div>


<


/el-card>


<


/div>


<


/div>


<


/template>


export


default,,


,],        cols:[,


,,],


}},created()


,mounted()


,    methods:


)this


.datalist.


foreach


(function


(value, index))}


,}}<


/script>


"scss" scoped>


<


/style>
列表的行是根據列cols中的prop去進行識別哪一列的資料從而進行渲染的，所以當你在cols中加入乙個物件

this


.cols.


push


()
的時候必須同時動態地向你的行中新增乙個與prop同名的key和value：

this


.datalist.


foreach


(function


(value, index)


)
有的同學說，我想要同時實現行的自定義怎麼辦？官網給出的自定義行的**如下：

prop=


"date"


label=


"日期"


width=


"180"


>


"scope"


>


="datafont"


>


}<


/span>


<


/template>


<


/el-table-column>
如果直接放到如上**中肯定是要報undefined的，因為我們的}這個引數是動態可變的，而如果全部去判斷之後顯示的話又未免顯得過於笨拙了，那麼我們可以向父元素看一下，可以看到這個引數：col.prop，沒錯了，這個就是這個動態的引數，也就相對應原來固定的}，好了，話不多說，**附上：



="retained"


>


="datalist countfont"


>


border


:data=


"datalist"


style=


"width: 100%;"


>


:show-overflow-tooltip=


"true"


prop=


"data"


width=


"180"


>


"scope" style=


"text-align: left"


>


}<


/span>


<


/template>


<


/el-table-column>


sortable=


"custom"


min-width=


"180"


v-for=


"col in cols"


:prop=


"col.prop"


:label=


"col.label"


>


"scope"


>


="datafont"


>


}<


/span>


="percentfont"


>


}<


/span>


<


/template>


<


/el-table-column>


<


/el-table>


"addcols"


>


新增一列


<


/el-button>


<


/div>


<


/div>


<


/el-card>


<


/div>


<


/div>


<


/template>


export


default


,            list1:


,            list2:,}


,,list1:


,            list2:,}


,,list1:


,            list2:,}


,],        cols:[,


,,],


}},created()


,mounted()


,    methods:


)this


.datalist.


foreach


(function


(value, index)})


},}}


<


/script>


"scss" scoped>


<


/style>

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

需要使用的時候，在這裡我們演示一下input button的用法 如何定義規則 在form上定義 rules loginformrules 在data中定義規則 loginformrules 驗證密碼 password 然後在每乙個需要規定的地方使用prop password 如何雙向繫結使用者名稱...