<template>
  <el-table
    :data="tableData"
  >
    <!-- 一级 -->
      <el-table-column
        v-for="(column, column_idx) in test_columns"
        :key="column_idx"
        :prop="column.prop"
        :label="column.label"
      >
        <!-- 二级 -->
        <template v-if="column.children">
          <el-table-column
            v-for="(column_two, column_two_idx) in column.children"
            :key="column_two_idx"
            :prop="column_two.prop"
            :label="column_two.label"
          >
            <!-- 三级 -->
            <template v-if="column_two.children">
              <el-table-column
                v-for="(column_three, column_three_idx) in column_two.children"
                :key="column_three_idx"
                :prop="column_three.prop"
                :label="column_three.label"
              >
                <!-- 四级 -->
                <template v-if="column_three.children">
                  <el-table-column
                    v-for="(column_four, column_four_idx) in column_three.children"
                    :key="column_four_idx"
                    :prop="column_four.prop"
                    :label="column_four.label"
                  ></el-table-column>
                </template>
              </el-table-column>
            </template>
          </el-table-column>
        </template>
      </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'Table-tree',
  data() {
    return {
      test_columns: [
        {
          label: '1',
          prop: '',
          children: [
            {
              label: '2-1',
              prop: 'name',
              children: [
                {
                  label: '3-1',
                  prop: 'name',
                  children: [
                    {
                      label: '4-1',
                      prop: 'name',
                    },
                    {
                      label: '4-2',
                      prop: '',
                    },
                    {
                      label: '4-3',
                      prop: '',
                    },
                  ]
                },
                {
                  label: '3-2',
                  prop: '',
                },
              ]
            },
            {
              label: '2-2',
              prop: 'address'
            },
            {
              label: '2-3',
              prop: 'city'
            },
          ]
        }
      ],
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
    }
  }
}
</script>

<style>

</style>