写了一个可配置表头的表格

这个文章有问题

HTML
<template>
  <div id="app">
    <el-tree
  :data="data"
  draggable
  show-checkbox
  ref='tree'
  :allow-drop="allowDrop"
  node-key="id"
  @check-change='checkChange'
  :default-checked-keys="list"
  :props="defaultProps">
</el-tree>
<button @click='clickOK'>确认</button>

<template>
    <el-table
      :data="tableData"
      v-if="labelList.length > 0"
      style="width: 100%">
      <el-table-column
        prop="date"
        :label="labelList[0]"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        :label="labelList[1]"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        v-if="labelList[2]"
        :label="labelList[2] && labelList[2]">
      </el-table-column>
      <el-table-column
      v-if="labelList[3]"
        prop="address"
        :label="labelList[3] && labelList[3]">
      </el-table-column>
      <el-table-column
        prop="date"
      v-if="labelList[4]"
        :label="labelList[4] && labelList[4]"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        v-if="labelList[5]"
        :label="labelList[5] && labelList[5]"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        v-if="labelList[6]"
        :label="labelList[6] && labelList[6]">
      </el-table-column>
      <el-table-column
        prop="address"
        v-if="labelList[7]"
        :label="labelList[7] && labelList[7]">
      </el-table-column>
        <el-table-column
        prop="address"
        v-if="labelList[8]"
        :label="labelList[8] && labelList[8]">
      </el-table-column>
        <el-table-column
        prop="address"
        v-if="labelList[9]"
        :label="labelList[9] && labelList[9]">
      </el-table-column>
    </el-table>
  </template>
  </div>
</template>

//逻辑

<script>
 export default {
    data() {
      return {
       data: [{
          disabled: true,
          id: 1,
          label: '序号1(必选)',
          level: 1,
        }, {
          id: 2,
          level: 1,
          disabled: true,
          label: '企业名称(必选)',
        }, {
          level: 1,
          id: 3,
          label: '省市县',
        },{
          level: 1,
          id: 4,
          label: '限定能耗',
        }, {
          level: 1,
          id: 5,
          label: '目标能耗',
        }, {
          level: 1,
          id: 6,
          label: '期望能耗',
        },{
          level: 1,
          id: 7,
          label: '2D地址',
        }, {
          level: 1,
          id: 8,
          label: '3D地址',
        }, {
          level: 1,
          id: 9,
          label: '能源报表地址',
        }],
        list: [],
        labelList: [],
        show:true,
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
        draggingList: []
      };
    },
    mounted() {
this.$refs.tree.setCheckedKeys([1,2,3,4]);
      this.clickOK()
    },
    methods: {
      // 只能在同级别下拖拽
      allowDrop(draggingNode, dropNode, type) {
        //   排序后的新数组
        this.draggingList = draggingNode.store.data
      if (draggingNode.data.level === dropNode.data.level) {
        if (draggingNode.parent.id === dropNode.parent.id) {
          return type === "prev" || type === "next";
        }
      } else {
        // 不同级进行处理
        return false;
      }
    },
      clickOK() {
        this.labelList = []
        //默认走这段逻辑是没有进行过拖拽的
        let keyList = this.$refs.tree.getCheckedKeys()
        this.data.map((item,index) => {
          if(this.data[keyList[index] - 1]){
            this.labelList.push(this.data[keyList[index] - 1].label)
          }
        })
         //如果拖拽了,就走这段程序
        if(this.draggingList.length > 0 ){
          this.labelList = []
          this.draggingList.forEach((item) => {
            keyList.forEach(el => {
              if(item.id === el) {
                this.labelList.push(item.label)
              }
            })
          })
        }
        this.$forceUpdate()
      },
      // 解决拖拽后选中的数据变为不选中了
      checkChange(a) {
        let checkedLists = this.$refs.tree.getCheckedKeys()
        if(!checkedLists.includes(a.id)){
          checkedLists.push(a.id)
          this.$refs.tree.setCheckedKeys(checkedLists);
        }
      }
    }
  };
</script>

初始化页面时这样的