【Vue3】element-plus表格字段内容为空时显示自定义内容_vue 表格无数据自定义内容-优快云博客

本文链接：https://blog.youkuaiyun.com/happy488127311/article/details/129610889

文章讲述了在前端使用Vue.js的el-table组件时，如何通过cell-style属性来处理后台接口返回的包含null值的数据，统一美化表格，将空字段替换为自定义内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>