VUE2.0+ElementUI2.0表格el-table循環(huán)動態(tài)列渲染的寫法詳解
更新時間：2018年11月30日 09:39:57 作者：River_mx
這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table循環(huán)動態(tài)列渲染的寫法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
先看看ElementUI里關于el-table的template數據結構：
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
再看看ElementUI里關于el-table的data數據結構：
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
}
}
</script>
那么問題來了，如果有很多prop怎么辦？比如幾百個？那就要用到循環(huán)結構了，獲取到data數據之后，template的代碼可以這樣改：
請忽略上圖代碼中的其他參數，看v-for指令，里面的positionList對應的是el-table 里 :data="tableData"，把它的任意數組里對象的key取出來就好了
細心的小伙伴已經發(fā)現了，我還用了動態(tài)的width，為了解決不同字數長度的表頭折行顯示的問題，這里的數據存在了positionKey的對象里，專門用來匹配到途中代碼通過v-for循環(huán)對應的index（key）一致，從而獲取到對應的width，為了方便使用，positionKey的數據結構是這樣的：
export const positionKey= {
key1: {
title: '表頭對應的文字1',
width: 100
},
key2: {
title: '表頭對應的文字2',
width: 120
},
key3: {
title: '表頭對應的文字3',
width: 110
},
}
這種數據結構也為后期的自定義拖拽配置動態(tài)列做了預備~
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于vue路由中前進后退的一些事兒，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue路由具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
這篇文章主要介紹了Vue3 reactive響應式賦值頁面不渲染的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
在現代 Web 開發(fā)中,保持用戶界面的動態(tài)性和響應性至關重要,當用戶觸發(fā)某些操作時,例如點擊按鈕或者完成表單提交,我們往往需要刷新頁面的一部分來展示最新的數據,本文將介紹如何使用 Vue 3 和 Pinia 來實現這一功能,需要的朋友可以參考下2024-08-08
富文本編輯器quill.js?開發(fā)之自定義插件示例詳解
這篇文章主要為大家介紹了富文本編輯器quill.js?開發(fā)之自定義插件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
本文主要介紹了Vue簡化用戶查詢/添加功能的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
Vue 2.0 中依賴注入 provide/inject組合實戰(zhàn)
這篇文章主要介紹了Vue 2.0 依賴注入 provide/inject組合，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了Vue中多個元素、組件的過渡及列表過渡的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
這篇文章主要介紹了基于vue+echarts 數據可視化大屏展示的方法示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2020-03-03
這篇文章主要為大家詳細介紹了vue微信分享功能，vue實現當前頁面分享其他頁面，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要介紹了Vue3如何清空Reactive定義的數組問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10