Vue+element UI table 多级表头和动态表数据

实现多级表头、动态数据 效果

第一步: 创建3个vue文件:

1. my-column.vue
2. my-table.vue
3. use-table.vue

my-column.vue

<template>

  <el-table-column 
	   :prop="col.prop"
       :label="col.label"
       align="center"
  >
    <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>

my-table.vue

<template>
  <div class="my-table">
    <el-table :data="data" max-height="800">
      <el-table-column label="序号" type="index" width="70" align="center"/>
      <my-column v-for="(item,index) in col" :key="index" :col="item"></my-column>
    </el-table>
  </div>
</template>

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

use-table.vue

<template>
   <my-table
              :col="col"
              :data="dataList">
    </my-table>
</template>
<script>
 import MyTable from './my-table'
 export default {
  name: "UseTable",
  components: { MyTable },
  data() {
    return {
      col: [],
      dataList:[]
      }
   },
   methods: {
   	  getList() {
   			col: [
			        {
			          prop: 'date',
			          label: '日期'
			        },
			        {
			          label: '事务所',
			          children: [
			            {
			              prop: 'name',
			              label: '代码'
			            },{
			              prop: 'name',
			              label: '名称'
			            }
			          ]
			        },
			        {
			          label: '上市公司审计',
			          children: [
			            {
			              prop: 'name',
			              label: '收费'
			            },{
			              prop: 'name',
			              label: '数量'
			            },{
			              prop: 'name',
			              label: '平均价格'
			            }
			          ]
			        },
			        {
			          label: '配送信息',
			          children: [
			            {
			              prop: 'name',
			              label: '姓名'
			            },
			            {
			              label: '地址',
			              children: [
			                {
			                  prop: 'province',
			                  label: '省份'
			                },
			                {
			                  prop: 'city',
			                  label: '市区'
			                },
			                {
			                  prop: 'address',
			                  label: '地址'
			                }
			              ]
			            }
			          ]
			        }
      		],
      dataList: [
        {
          date: '2016-05-03',
          xx: {
            code: xx,
            name: xx
          },
          xx2: {
            code: xx,
            name: xx
          },
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
      ]
   		}
   }
 }
</script>

第二步:将上面的三个文件代码复制到项目中,即可实现多级表头和动态表数据效果.