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

這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染怎么寫，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司專注于清水網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供清水營銷型網(wǎng)站建設(shè)，清水網(wǎng)站制作、清水網(wǎng)頁設(shè)計(jì)、清水網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)公司服務(wù)，打造清水網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供清水網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

<template>
  <el-table
   :data="tableData"
   >
   <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的代碼可以這樣改：

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

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

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染怎么寫”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)站名稱：VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染怎么寫
分享地址：http://muchs.cn/article46/igspeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、品牌網(wǎng)站制作、網(wǎng)站改版、用戶體驗(yàn)、App設(shè)計(jì)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)