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ā)現(xiàn)了，我還用了動態(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路由中前進后退的一些事兒，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue路由具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-05-05
Vue3 reactive響應式賦值頁面不渲染的解決
這篇文章主要介紹了Vue3 reactive響應式賦值頁面不渲染的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
使用Vue3和Pinia實現(xiàn)網頁刷新功能
在現(xiàn)代 Web 開發(fā)中,保持用戶界面的動態(tài)性和響應性至關重要,當用戶觸發(fā)某些操作時,例如點擊按鈕或者完成表單提交,我們往往需要刷新頁面的一部分來展示最新的數據,本文將介紹如何使用 Vue 3 和 Pinia 來實現(xiàn)這一功能,需要的朋友可以參考下
2024-08-08
富文本編輯器quill.js?開發(fā)之自定義插件示例詳解
這篇文章主要為大家介紹了富文本編輯器quill.js?開發(fā)之自定義插件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08
Vue簡化用戶查詢/添加功能的實現(xiàn)
本文主要介紹了Vue簡化用戶查詢/添加功能的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-01-01
Vue 2.0 中依賴注入 provide/inject組合實戰(zhàn)
這篇文章主要介紹了Vue 2.0 依賴注入 provide/inject組合，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2019-06-06
Vue中多個元素、組件的過渡及列表過渡的方法示例
這篇文章主要介紹了Vue中多個元素、組件的過渡及列表過渡的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-02-02
基于vue+echarts 數據可視化大屏展示的方法示例
這篇文章主要介紹了基于vue+echarts 數據可視化大屏展示的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2020-03-03
vue微信分享 vue實現(xiàn)當前頁面分享其他頁面
這篇文章主要為大家詳細介紹了vue微信分享功能，vue實現(xiàn)當前頁面分享其他頁面，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-12-12
Vue3如何清空Reactive定義的數組
這篇文章主要介紹了Vue3如何清空Reactive定義的數組問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10