一、问题详情

在项目中遇到这个问题就是要在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时使用，如果写死的在每一列里直接加入插槽即可

三、解决方案二

<el-table-column
              v-for="(item,index) in columns"
              header-align="center"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :key="index"
            >
              <template slot-scope="scope">
                <span v-if="item.slot==='amount'" >{{scope.row[item.prop]?(scope.row[item.prop]/100).toFixed(2):0}}</span>
                <span v-else>
                  {{scope.row[item.prop]}}
                </span>
              </template>
            </el-table-column>

这个需要在el-table-column外层添加template直接使用span坐中间桥梁即可

这是我编写过程中遇到的问题，查了一下这两套解决方案比较适合

参考链接：https://blog.csdn.net/qq_45971405/article/details/103582639