一、问题详情
在项目中遇到这个问题就是要在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