快捷導(dǎo)航

VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染的寫法詳解

更新時(shí)間：2018年11月30日 09:39:57 作者：River_mx

這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染的寫法詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

先看看ElementUI里關(guān)于el-table的template數(shù)據(jù)結(jié)構(gòu)：

<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里關(guān)于el-table的data數(shù)據(jù)結(jié)構(gòu)：

<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怎么辦？比如幾百個(gè)？那就要用到循環(huán)結(jié)構(gòu)了，獲取到data數(shù)據(jù)之后，template的代碼可以這樣改：

請(qǐng)忽略上圖代碼中的其他參數(shù)，看v-for指令，里面的positionList對(duì)應(yīng)的是el-table 里 :data="tableData"，把它的任意數(shù)組里對(duì)象的key取出來就好了

細(xì)心的小伙伴已經(jīng)發(fā)現(xiàn)了，我還用了動(dòng)態(tài)的width，為了解決不同字?jǐn)?shù)長(zhǎng)度的表頭折行顯示的問題，這里的數(shù)據(jù)存在了positionKey的對(duì)象里，專門用來匹配到途中代碼通過v-for循環(huán)對(duì)應(yīng)的index（key）一致，從而獲取到對(duì)應(yīng)的width，為了方便使用，positionKey的數(shù)據(jù)結(jié)構(gòu)是這樣的：

export const positionKey= {
 key1: {
  title: '表頭對(duì)應(yīng)的文字1',
  width: 100
 },
 key2: {
  title: '表頭對(duì)應(yīng)的文字2',
  width: 120
 },
 key3: {
  title: '表頭對(duì)應(yīng)的文字3',
  width: 110
 },
}

這種數(shù)據(jù)結(jié)構(gòu)也為后期的自定義拖拽配置動(dòng)態(tài)列做了預(yù)備~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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