element-ui的表格。表頭和表格數據都是接口動態給的。多級表頭。如何寫呢？

 element-ui多級表頭官網是這樣寫的https://element.eleme.cn/#/zh-CN/component/table

我們看到這是已知一級和二級表頭是那幾個字段然後拼起來的。如果表頭信息是接口動態給的，根據傳參每次都是不一樣的。這樣官網的這個例子根據沒辦法實現。

就像上面這樣的表格數據。他的表頭是兩級的。表頭和數據都是接口給我的。

上面是接口傳來的數據。titledata是表頭的數據。children如果長度大於0.children就是他的2級表頭。tablebase是表格內容。表頭的value值對應表格數據的鍵值。

如果tablebase作爲表格一級表頭的表格。鍵是表頭，那麼我們即使不知道長度也可以通過循環來寫的。參考這篇文章https://blog.csdn.net/qq_33769914/article/details/106547680。

但是此時我們都是動態的還是關聯的怎麼辦呢。開始我用的原生的tr來寫表頭。在用上面鏈接方法寫表格內容。但是這相當於是兩個部分。因爲不能修改tr的寬度，所以導致根本對不整齊。下面內容過長出現滾動條，上面的表頭卻是擠着硬在一行內撐的換行。

然後我發現了我們可以用組件。把el-table和el-table-column分開來寫

父頁面table.vue

<template>
  <div>
    <my-table :titledata="titledata"
      :tabledata="tabledata">
    </my-table>
  </div>
</template>

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

 

可以看到上面的頁面使用了組件MyTable。下面我們來寫MyTable.vue

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

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

 

上面的組件呢又用到了MyColumn這個子組件。

MyColumn.vue

<template>

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

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

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

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