一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

存在问题

最近在使用 element ui 做项目的时候发现，当table通过循环渲染时，表格列的渲染顺序发生了错乱，具体来看一下。

我的 table 绑定的数据格式如下：

<script>
export default {
  data() {
    return {
      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 弄",
        },
      ],
    };
  },
};
</script>

页面代码如下：

<template>
  <div class="menu-container">
    <el-table :data="tableData" border>
      <div v-for="(value, key) in tableData[0]" :key="key">
        <el-table-column
          :label="key"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row[key] }}</span>
          </template>
        </el-table-column>
      </div>
    </el-table>
  </div>
</template>

按道理在浏览器中渲染出来的表格，它的列的顺序应该与绑定的表格数据一致，依次为 date、name、address，但事实上并非如此。渲染结果如图所示：

解决问题

为了解决这个问题，一开始还研究了一番数据渲染的排序规律，手动改了表格数据的格式，可以暂时解决这个问题。但是如果需要渲染的数据列很多的话，其中的规律就很难掌握，有可能根本没有规律，这样的话，改格式似乎不能从根本上解决问题，而且有时候后台需要的数据格式可能是固定的，那就更难了，所以果断放弃这种方法。

经过查找资料，发现原来会有这种 bug 的原因是因为 element ui 的 el-table 标签中不支持除 element ui 标签以外的标签（这里所用到的div），到这里我不得不吐槽一下真的是很坑啊，气死我了。

那么接下来就知道怎么改了，直接贴代码了：

<template>
  <div class="menu-container">
    <el-table :data="tableData" border>
      <template v-for="(value, key) in tableData[0]">
        <el-table-column
          :key="key"
          :label="key"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row[key] }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

渲染效果如图：

补充

这里我为什么不直接在 el-table-column 标签上遍历，这样的话就不会有这种问题：

<template>
  <div class="menu-container">
    <el-table :data="tableData" border>
        <el-table-column
          v-for="(value, key) in tableData[0]"
          :key="key"
          :label="key"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row[key] }}</span>
          </template>
        </el-table-column>
    </el-table>
  </div>
</template>

当然，对于简单的表格渲染，以上的方法肯定可以达到效果，但是如果是对于复杂表格，比如需要加判断条件的那种，同一个标签不让同时使用 v-if 和 v-for 的，我们就需要做嵌套，这时候就有可能出现上面的问题。