element ui 表格多級表頭無限嵌套

MyTable.vue

<template>
  <div class="my-table">
    <el-table :data="data">
      <my-column v-for="(item,index) in col" :key="index" :col="item"></my-column>
    </el-table>
  </div>
</template>

<script>
import MyColumn from './MyColumn'
export default {
  components: {
    MyColumn
  },
  props: {
    col: {
      type: Array
    },
    data: {
      type: Array
    }
  }
}
</script>
<style scoped>
</style>

MyColumn.vue

<template>

  <el-table-column :prop="col.prop"
    :label="col.label"
    align="left">

    <template v-if="col.children">
      <my-column v-for="(item, index) in col.children"
        :key="index"
        :col="item"></my-column>
    </template>

  </el-table-column>
</template>

<script>
export default {
  name: 'MyColumn',
  props: {
    col: {
      type: Object
    }
  }
}
</script>
<style scoped>
</style>

使用

<template>
  <div>
    <my-table :col="col"
      :data="data">
    </my-table>
  </div>
</template>

<script>
import MyTable from './MyTable'
export default {
  components: {
    MyTable
  },
  data() {
    return {
      col: [
        {
          prop: 'date',
          label: '日期'
        },
        {
          label: '配送信息',
          children: [
            {
              prop: 'name',
              label: '姓名'
            },
            {
              label: '地址',
              children: [
                {
                  prop: 'province',
                  label: '省份'
                },
                {
                  prop: 'city',
                  label: '市區(qū)'
                },
                {
                  prop: 'address',
                  label: '地址'
                }
              ]
            }
          ]
        }
      ],
      data: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀區(qū)',
          address: '上海市普陀區(qū)金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀區(qū)',
          address: '上海市普陀區(qū)金沙江路 1518 弄',
          zip: 200333
        }
      ]
    }
  }
}
</script>
<style>
</style>

預(yù)覽地址:https://jsfiddle.net/mmx38qxw/2808/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前端知識體系http://www.cnblogs.com/sb19871023/p/3894452.html 前端...
    秋風(fēng)喵閱讀 12,738評論 7 163
  • 作為一個前端程序猿,下面這些站會讓你眼前一亮。 amazeui框架組建豐富 http://amazeui.org...
    歐巴冰冰閱讀 9,015評論 18 303
  • 蓋有非常之功,必待非常之人。語出司馬相如。何謂非常之功?何謂非常之人?非常之人行非常之事建非常之功的前提,應(yīng)該是先...
    草上的微光閱讀 248評論 0 2
  • 原創(chuàng) 文 夏瑜斐 你這個罪魁禍?zhǔn)祝医K于找到你了, 眼鏡。熊孩子一把抓住我衣領(lǐng),把我拽了一個趔趄。我扭頭,審視:模...
    夏瑜斐的小木屋閱讀 437評論 0 0
  • 今天我們畫一個美女,是的,又是外國的。也許我對外國美女情有獨鐘吧哈哈。 先初略畫一個輪廓。接著畫五官: 然后用彩鉛...
    kekepolo閱讀 447評論 4 1

友情鏈接更多精彩內(nèi)容