Element: 关于TableColumn顺序问题

[gorphensu]

我为了方便Table的整合，统一对外属性，将Table以及TableColumn包装了一遍

<template>
    <el-table :data="tableData" stripe style="width: 100%" :height="height">
        <table-item v-for="(item, index) in items" />
    </el-table>
    </el-table>
</template>

table-column也包装了一遍

<template>
    <el-table-column :prop="binding" :label="title" :width="width">
    </el-table-column>
</template>

那么问题来了。这样渲染出来table 列的顺序会不正确， 第一项永远会跑到最后一个

[gorphensu]

<el-table :data="tableData" stripe style="width: 100%" :height="height">
        <xt-table-item  binding="name" title="姓名"/>
        <xt-table-item  binding="address" title="地址"/>
        <xt-table-item  binding="date" title="日期"/>
        <xt-table-item  binding="status" title="启动状态"/>
    </el-table>

渲染顺序如下
地址 》日期》启动状态》 姓名

[bulaye]

也遇到相同问题，在源码中修改table-store.js中insertColumn方法，index=-1 使用splice方法插入array顺序会出错(?) 修改为
if (typeof index !== 'undefined') { if(index == -1){ array.push(column); }else{ array.splice(index, 0, column); } } else { array.push(column); }
暂时解决顺序问题，不知道有无其他解决方法

[gorphensu]

@bulaye 谢谢，不想改源码， 我现在是将数据数组的最后一个数据诺到第一个，也只能是暂时解决吧。等今后的版本有没能修复这个问题吧。

[furybean]

@liril-net Table 的。

[liril-net]

@furybean 我试试

[weiyujia]

我也遇到这个问题了，也是第一项跑到最后一项去了，请问楼主解决这个问题了没 @wyjieying

[minikiller]

我也遇到同样的问题了，不知道是否已经解决。@wyjieying 有好的解决办法，烦请告知。

[Leopoldthecoder]

2.0 版本如果还有问题，请开一个新的 issue，并附上 demo。

[hongz1125]

这个问题 还是存在！！！

[tomastong]

mark，我也遇到到了

[hanshou101]

ElementUI，2.6.1版本

该问题仍然存在。

[leitingting08]

2.6.3 还是存在！！！

[hjl19911127]

2.11还是错的

[topul]

2.13.0 还是错的
后来发现是因为el-table-column的外层一定要是el-table，不能插入其它元素，否则会导致位置计算错误。这样在二次封装的时候会导致多一层处理代码，还是希望能解决一下。

---

@minikiller @weiyujia @Leopoldthecoder
想到一种解决方案，组件封装的时候最外层还是el-table-column，循环放到父组件中进行，封装的内部循环依然放到父组件中进行。类似这样：
父组件：

<el-table>
  <template v-for="(item, index) in items">
      <table-item :key="index" />
  </template>
</el-table>

子组件table-item:

<template>
  <el-table-column>
        ...
        <template v-for="(item, index) in items">
            <table-item :key="index" />
       </template>
  </el-table-column>
</template>

[mouxi19910315]

同样遇到了这个问题..2.13.0

[cxy930123]

使用functional组件应该可以吧

[judasnow]

+1

[kkkisme]

@topul 可以试下abstract: true

[ty-bt]

使用functional组件应该可以吧

组件改为functional: true， render中直接返回数组可以解决

原因就是 @topul 说的那样，el-table-column的外层一定要是el-table

[libbGit]

2.13.0 还是错的
后来发现是因为el-table-column的外层一定要是el-table，不能插入其它元素，否则会导致位置计算错误。这样在二次封装的时候会导致多一层处理代码，还是希望能解决一下。

@minikiller @weiyujia @Leopoldthecoder
想到一种解决方案，组件封装的时候最外层还是el-table-column，循环放到父组件中进行，封装的内部循环依然放到父组件中进行。类似这样：
父组件：

<el-table>
  <template v-for="(item, index) in items">
      <table-item :key="index" />
  </template>
</el-table>

子组件table-item:

<template>
  <el-table-column>
        ...
        <template v-for="(item, index) in items">
            <table-item :key="index" />
       </template>
  </el-table-column>
</template>

牛皮，解决了