【无标题】

前提：表格遍历列需要插入自定义格式

一、使用v-html插入，缺点是只能写简单的html

1. 组件

<!-- html插槽 --><el-table-columnv-if="item.type == 'html'":key="item.id":label="item.name":prop="item.id":show-overflow-tooltip="true":width="item.width ? item.width : ''":formatter="item.formatter"><template slot-scope="scope"><div v-html="item.html(scope.row)"></div></template></el-table-column>

2. 父组件

        {name: '体检表生成状态',id: 'pdfStatus',type: 'html',html: row => {const pdfErrorDesc = row.pdfErrorDescconst xzsj = dateFormat(new Date(row.xzsj), 'yyyy-MM-dd HH:mm:ss')switch (row.pdfStatus) {case '0':return `<div>未生成</div>`case '1':return `<div>已生成<div>${xzsj}</div></div>`case '2':return `<div>生成中</div>`case '3':return `<div>生成失败<div>${pdfErrorDesc}</div></div>`}}}

二、使用slot插槽插入，完美拒绝表格列的自定义

1. 组件

<el-table-columnv-if="item.type == 'slot'":key="item.id":label="item.name":prop="item.id":show-overflow-tooltip="true":width="item.width ? item.width : ''":formatter="item.formatter"><template slot-scope="scope"><slot :scope="scope" :name="item.slot"></slot></template></el-table-column>

 2. 父组件

        {name: '标记操作者',id: 'bjczr',type: 'slot',slot: 'bjczr'},

<template v-slot:bjczr="scope"><el-popover trigger="hover" placement="top"><p><span class="bjczr-text">用户名: </span>{{ scope.scope.row.bjczr }}</p><p><span class="bjczr-text">账号:</span> {{ scope.scope.row.bjczrYhm }}</p><p><span class="bjczr-text">所属部门:</span>{{ scope.scope.row.bjczrBmMc }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">{{ scope.scope.row.bjczr }}</el-tag></div></el-popover>
</template>

三、总结

如果只是简单的html，直接用v-html，如果是相对复杂，需要用到vue的组件，用slot。