element table 列顺序错乱问题

问题：如标题所言，代码里用v-if控制的列的显示与否，但是页面上本该第一列的直接变成了最后一列，网上有说，用v-show代替v-if的，可能我的代码逻辑比较复杂，没有成功

我的代码如下：

<el-table :data="dataList2" >
        <el-table-column type="index" label="序号" width="50" ></el-table-column>
        <span v-if="type == '2'">
          <el-table-column
            v-for="(item, index) in tableData3"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :min-width="item.width"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div v-if="item.prop === 'name'">
                <el-inputn
                    v-model="scope.row.data[item.prop]"
                    placeholder="请输入内容"
                  ></el-input>
              </div>
              <div v-else>
                <el-select
                  v-model="scope.row.data.direction"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item2 in labelArr"
                    :key="item2.key"
                    :label="item2.val"
                    :value="item2.key"
                  ></el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
        </span>
        <span v-if="type != '2'">
          <el-table-column
            v-for="(item, index) in tableData2"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :min-width="item.width"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div v-if="item.prop === 'visible'">
                <el-checkbox
                  v-model="scope.row.visible"
                ></el-checkbox>
              </div>
              <div v-else-if="item.prop === 'name'">
                <el-input
                    v-model="scope.row.data[item.prop]"
                    placeholder="请输入内容"
                  ></el-input>
              </div>
            </template>
          </el-table-column>
        </span>
        <el-table-column
          label="操作"
          width="80"
          v-if="type != '2'"
        >
          <template slot-scope="scope">
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

后来发现table里面除了el-table-column外，只能有template标签，所以把上面的span全部替换成template就可以了，即改成这样就可以了，这样，在页面上就是想要的列的顺序了

<el-table :data="dataList2">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <template v-if="type == '2'">
          <el-table-column
            v-for="(item, index) in tableData3"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :min-width="item.width"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <template v-if="item.prop === 'name'">
                <el-input v-model="scope.row.data[item.prop]"
                    placeholder="请输入内容"
                  ></el-input>
              </template>
              <template v-else>
                <el-select
                  v-model="scope.row.data.direction"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item2 in labelArr"
                    :key="item2.key"
                    :label="item2.val"
                    :value="item2.key"
                  ></el-option>
                </el-select>
              </template>
            </template>
          </el-table-column>
        </template>
        <template v-if="type != '2'">
          <el-table-column
            v-for="(item, index) in tableData2"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :min-width="item.width"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <template v-if="item.prop === 'visible'">
                <el-checkbox v-model="scope.row.visible"
                ></el-checkbox>
              </template>
              <template v-else-if="item.prop === 'name'">
                <el-input v-model="scope.row.data[item.prop]"
                    placeholder="请输入内容"
                  ></el-input>
              </template>
            </template>
          </el-table-column>
        </template>
        <el-table-column
          label="操作"
          width="80"
          v-if="type != '2'"
        >
          <template slot-scope="scope">
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>