element-ui中使用el-table ，el-table-column循环列发现列错乱解决方法

element-ui中使用el-table ，el-table-column循环列发现列错乱的解决方法 只需添加一行代码

由于需要动态循环列展示表格而不得不套一层div标签时会造成表格列错乱的想象，这是因为el-table中不允许有除el-table-column标签以外的元素。

解决方法有以下三种

1、 或许你可以试试使用template 标签包裹

把循环用的div标签换成template标签试试，如果不报错能用

2、把div标签删了，不用它包裹

如果你的代码中可以不用在el-table-column外层上套一层标签来循环的话建议把div直接删除，在el-table-column上v-for 就好了

3、再循环前多加一行宽度为1的列 el-table-column

前面的两种方法在我现有的业务中明显是不行的 ，但是为了解决这个问题只能另想办法，据观察每次都是循环前的一列跑到最后面去了，那就加一列吧

//添加一列，让这一列放到表格最后面去
<el-table-column width="1" v-show="false"></el-table-column>

完整代码如下

<el-table-column v-if="
          tableDatas.chooseType == 'selection' ||
          tableDatas.chooseType == 'index' ||
          tableDatas.chooseType == 'expand'
        " :type="tableDatas.chooseType" width="60" align="center"></el-table-column>
 <!-- 增加多级表头 -->
   //循环前加的这一列，没有其他什么作用只是让这一例代替有用的列放在了表格最后面
  <el-table-column width="1" v-show="false"></el-table-column>
  <div v-for="(item,index) in tableHead" :key="index">
    <el-table-column  v-if="item.child || false" :label="item.name">
      <div v-for="(item2,index2) in item.child" :key="index2" >
        <st-Head  :tableDatas="tableDatas" :item="item2"></st-Head>
      </div>
    </el-table-column>
    <st-Head v-if="!item.child" :tableDatas="tableDatas" :item="item"></st-Head> 
  </div>