el-table内容为空，设置默认值

最新推荐文章于 2025-07-01 21:05:26 发布

東三城

最新推荐文章于 2025-07-01 21:05:26 发布

阅读量7.4k

点赞数 12

CC 4.0 BY-SA版权

分类专栏：前端笔记文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/qq_40440961/article/details/121226180

前端笔记专栏收录该内容

9 篇文章

订阅专栏

本文介绍了两种方法在Element UI的el-table组件中处理内容为空的情况。方法一是通过CSS设置，利用`:empty`伪类在单元格为空时显示默认值；方法二是通过`formatter`属性，在表格列定义中进行内容格式化，当数据为空时返回默认值。这两种方法可以帮助提升表格数据展示的用户体验。

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

el-table内容为空，设置默认值

效果

在这里插入图片描述

方法一：通过css设置

/deep/.el-table {
  .cell:empty::before {
    content: "---";
    color: #ccc;
  }
  .is-leaf {
    .cell:empty::before {
      content: "---";
      color: #ccc;
    }
  }
}

方法二：过滤

在el-table-column里使用:formatter

<el-table-column
        prop="caseTypeNames"
        label="类型"
        :formatter="caseTypeNamesFormat"
      >
</el-table-column>

    // 类型格式化
    caseTypeNamesFormat (row) {
      let showProp = null
      row.caseTypeNames ? showProp = row.caseTypeNames : showProp = '---'
      return showProp
    },