【Vue3】element-plus表格字段内容为空时显示自定义内容

1. 需求描述

在前端用表格显示后台接口返回的列表数据，有时候有些字段内容是null，此时为了统一美观，可以使用css属性对表格空字段进行修改，使其显示自定义内容。效果图如下：

2. 实现方式

这是页面的代码，为了简化，不必要的属性已经删除了，需要在el-table 标签中添加属性cell-style

<template>
    <el-table :data="filterTableData" :cell-style="cellStyle">
        <el-table-column prop="id" type="index" label="序号" width="90px" align="center" />
        <el-table-column prop="title" sortable label="反馈标题" />
        <el-table-column prop="categories" sortable label="反馈类别" />
        <el-table-column prop="senderEmail" sortable label="发送者" />
        <el-table-column prop="sendTime" sortable label="发送时间" />
        <el-table-column fixed="right" align="right" width="200px">
            <template v-slot="scope">
                <el-button type="primary" size="small">查看</el-button>
                <el-button type="success" size="small">回复</el-button>
            </template>
        </el-table-column>
    </el-table>
<template>

在script标签中，编写对应的操作，row是行，column是行中的所有列，rowIndex、columnIndex分别是行号和列号

column.property可以获取到列中的内容，也可以通过该方式进行其他自定义操作，如更改单元格样式等

<script setup>
// 表格字段为空操作
const cellStyle= ({
     
      row, column, rowIndex, columnIndex })=> {
    
    
  if (row[column.property] == null) {
    
    
    row[column.property] = '--'
  }
}
</script>