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

先看看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怎么辦咆耿?比如幾百個凳厢?那就要用到循環(huán)結(jié)構(gòu)了,獲取到data數(shù)據(jù)之后展东,template的代碼可以這樣改:

1522374707(1).png

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

細(xì)心的小伙伴已經(jīng)發(fā)現(xiàn)了,我還用了動態(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)也為后期的自定義拖拽配置動態(tài)列做了預(yù)備~

如果還有其它疑問請留言谐宙,謝謝支持~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末烫葬,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子凡蜻,更是在濱河造成了極大的恐慌搭综,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件划栓,死亡現(xiàn)場離奇詭異兑巾,居然都是意外死亡,警方通過查閱死者的電腦和手機忠荞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門蒋歌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來帅掘,“玉大人,你說我怎么就攤上這事堂油⌒薜担” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵府框,是天一觀的道長吱窝。 經(jīng)常有香客問我,道長迫靖,這世上最難降的妖魔是什么院峡? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮系宜,結(jié)果婚禮上照激,老公的妹妹穿的比我還像新娘。我一直安慰自己盹牧,他們只是感情好俩垃,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著欢策,像睡著了一般吆寨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上踩寇,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天啄清,我揣著相機與錄音,去河邊找鬼俺孙。 笑死辣卒,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的睛榄。 我是一名探鬼主播荣茫,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼场靴!你這毒婦竟也來了啡莉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤旨剥,失蹤者是張志新(化名)和其女友劉穎咧欣,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體轨帜,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡魄咕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了蚌父。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片哮兰。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡毛萌,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出喝滞,到底是詐尸還是另有隱情阁将,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布囤躁,位于F島的核電站冀痕,受9級特大地震影響荔睹,放射性物質(zhì)發(fā)生泄漏狸演。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一僻他、第九天 我趴在偏房一處隱蔽的房頂上張望宵距。 院中可真熱鬧,春花似錦吨拗、人聲如沸满哪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽哨鸭。三九已至,卻和暖如春娇妓,著一層夾襖步出監(jiān)牢的瞬間像鸡,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工哈恰, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留只估,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓着绷,卻偏偏與公主長得像蛔钙,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子荠医,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容