1、使用插槽+v-if
<el-table-column
label="评估技师"
align="center"
width="150"
prop="technicianName"
show-overflow-tooltip
>
<template #default="{ row }"> {{ row.technicianName || "-" }}</template>
</el-table-column>
<el-table-column
label="评估状态"
align="center"
prop="processState"
width="100"
show-overflow-tooltip
>
<template #default="{ row }">
<el-tag v-if="row.processState == '0'" type="danger">未审核</el-tag>
<el-tag v-if="row.processState == '5'" type="success">已审核</el-tag>
</template>
</el-table-column>
2、使用formatter属性
formatter属性绑定一个方法,函数有3个参数:
row 当前行的数据
colum 当前列的数据
cellValue 当前单元格的数据
<template>
<el-table
:data="tableData"
:default-sort="{ prop: 'date', order: 'descending' }"
style="width: 100%"
>
<el-table-column prop="date" label="Date" sortable width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" :formatter="formatter" />
</el-table>
</template>
<script lang="ts" setup>
const formatter = (row, column, cellValue) => {
//return cellValue=='1'?'是':'否'
return row.address=='1'?'是':'否'
}
const tableData: User[] = [
{
date: '2016-05-03',
name: 'Tom',
address: '1',
},
{
date: '2016-05-02',
name: 'Tom',
address: '2',
}
]
</script>
参考:【vue】el-table格式化el-table-column内容(主要的三种方法)_<el-table-column-CSDN博客