快捷導(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)列渲染的寫法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(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>

那么問(wèn)題來(lái)了，如果有很多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取出來(lái)就好了

細(xì)心的小伙伴已經(jīng)發(fā)現(xiàn)了，我還用了動(dòng)態(tài)的width，為了解決不同字?jǐn)?shù)長(zhǎng)度的表頭折行顯示的問(wèn)題，這里的數(shù)據(jù)存在了positionKey的對(duì)象里，專門用來(lái)匹配到途中代碼通過(guò)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)文章

詳解Vue3中ref和reactive函數(shù)的使用
這篇文章主要為大家詳細(xì)介紹了Vue3中ref和reactive函數(shù)的使用教程，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，需要的可以參考一下
2022-07-07
手把手教你Vue3?按需引入?Echarts的過(guò)程(收藏)
新項(xiàng)目采用?Vue3?作為前端項(xiàng)目框架,避免不了要使用?echarts,但是在使用的時(shí)候,出現(xiàn)了與?Vue2?使用不一樣的地方,所以特別記下來(lái),希望給到有需要的同學(xué)一些幫助
2023-10-10
Vue 使用中的小技巧
這篇文章主要介紹了Vue 使用中的小技巧,是小編日常開(kāi)發(fā)的時(shí)候用到的小技巧，需要的朋友可以參考下
2018-04-04
vue基礎(chǔ)ESLint?Prettier配置教程詳解
這篇文章主要介紹了vue基礎(chǔ)ESLint?Prettier配置教程詳解，本文使用VsCode?+?Vue?+?ESLint?+?Prettier?實(shí)現(xiàn)代碼格式規(guī)范?+?保存自動(dòng)修復(fù)代碼js+vue
2022-07-07
使用Vue組件實(shí)現(xiàn)一個(gè)簡(jiǎn)單彈窗效果
這篇文章主要介紹了使用Vue組件實(shí)現(xiàn)一個(gè)簡(jiǎn)單彈窗效果,本文主要內(nèi)容會(huì)涉及到彈窗遮罩的實(shí)現(xiàn)， slot 插槽的使用方式，props 、 $emit 傳參，具體組件代碼也傳上去了。需要的朋友可以參考下
2018-04-04
解決Element組件的坑:抽屜drawer和彈窗dialog
這篇文章主要介紹了解決Element組件的坑:抽屜drawer和彈窗dialog問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vue 使用計(jì)時(shí)器實(shí)現(xiàn)跑馬燈效果的實(shí)例代碼
這篇文章主要介紹了Vue 使用計(jì)時(shí)器實(shí)現(xiàn)跑馬燈效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-07-07
vue如何實(shí)現(xiàn)上傳圖片和顯示圖片
這篇文章主要介紹了vue如何實(shí)現(xiàn)上傳圖片和顯示圖片問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
基于腳手架創(chuàng)建Vue項(xiàng)目實(shí)現(xiàn)步驟詳解
這篇文章主要介紹了基于腳手架創(chuàng)建Vue項(xiàng)目實(shí)現(xiàn)步驟詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08
ElementUI如何修改el-cascader的默認(rèn)樣式
ElementUI 是一套u(yù)i組件庫(kù)，目前最新版本 react 和 vue 等主流框架都有支持。該庫(kù)默認(rèn)主題色是天藍(lán)色，若用于項(xiàng)目開(kāi)發(fā)，難免遇到要需求修改其默認(rèn)樣式的情況，這篇文章主要介紹了ElementUI如何修改el-cascader的默認(rèn)樣式,需要的朋友可以參考下
2023-12-12