el-table 空单元格填充自定义内容

最新推荐文章于 2025-05-22 14:06:04 发布

Yolo416

最新推荐文章于 2025-05-22 14:06:04 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue项目文章标签： vue

原文链接：https://blog.csdn.net/qq_32682301/article/details/117702932

vue项目专栏收录该内容

12 篇文章

订阅专栏

这篇博客介绍了如何在前端使用代码实现表格列的显示，包括`<el-table-column>`的用法，展示了如何展示不满足条件的运费，并通过模板插槽进行内容差异化处理。在数据项`dataItem`存在时显示'正常'，缺失时则以红色显示'异常'，突出了前端表格数据状态的可视化呈现。

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

效果图
在这里插入图片描述

代码

<el-table-column prop="unexpectExpense" label="不满足条件运费">
	<template slot-scope="{ row: { unexpectExpense} }">
		{{ unexpectExpense|| "-" }}
	</template>
</el-table-column>

在这里插入图片描述

<el-table-column prop="dataItem">
  <template slot-scope="{ row: { dataItem} }">
    {{ dataItem|| "--" }}
  </template>
</el-table-column>

不同内容不同色：

<el-table-column prop="dataItem">
  <template slot-scope="{ row: { dataItem} }">
    <span v-if="dataItem">正常</span>
    <span style="color: red" v-else>异常</span>
  </template>
</el-table-column>