element中表格列要遍历时如何加插槽（template）

问题详情

在项目中遇到这个问题就是要在element中的el-table标签中的el-table-column标签中使用插槽来自定义表格列的内容，由于el-table-column要用v-for遍历出来，所以操作起来就比较麻烦，于是有了一下代码：

    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        :label="v.name"
        :key="k"
        :prop="v.prop"
        :width="v.width"
        v-for="(v,k) in tableArr"
      >
        <template slot-scope="scope" v-if="k==2">
          <div @click="asd(scope)">{{scope.row.audit}}</div>
        </template>
      </el-table-column>
    </el-table>

事实证明这并不可行，这会导致只有满足v-if的那一列有内容，而其他列都为空（原因可能是vue认为所有列都使用了插槽，只是满足条件的这个插槽有内容，所以这个v-if写在template中和div中效果是一样的）这并不是我们预期的。

解决方案

直接上代码

<el-table :data="tableData" style="width: 100%">
      <template v-for="(v,k) in tableArr">
        <el-table-column :label="v.name" :key="k" :prop="v.prop" :width="v.width" v-if="k==2">
          <template slot-scope="scope">
            <div @click="asd(scope)">{{scope.row.audit}}</div>
          </template>
        </el-table-column>
        <el-table-column :label="v.name" :key="k" :prop="v.prop" :width="v.width" v-else></el-table-column>
      </template>
</el-table>

思路就是在el-table-colum外面包一个template来遍历，而不是直接遍历el-table-colum（但是key要绑定在el-table-colum上），然后把需要加插槽的列单独拎出来，用v-if v-else判断哪一列加插槽，这样他就不会影响不需要插槽的列，结束。

仅仅在需要遍历el-table-colum时使用，如果写死的在每一列里直接加入插槽即可