【UI】 element ui 表格没有数据时用--填充

fruge365

发布于 2025-12-15 09:49:48

1160

具体效果

实现代码

第一种方法加class类名

style中

  .table :empty::before {
    content: "--";
    color: gray;
  }

注意：如果使用了switch滑块、steps步骤条等，可能也会被加上--，效果就变成了

解决： template中，给switch滑块加class

      <el-table-column label="状态" width="90" prop="status" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            @change="statusMonitor(scope.$index, scope.row)"
            :active-value="0"
            :inactive-value="1"
            class="status" 
          >
          </el-switch>
        </template>
      </el-table-column>

style中

  .status :empty::before {
    content: "";
    color: red;
  }

第二种方法 template中

 <el-table-column label="维护开始时间" align="center" width="180">
   <template slot-scope="scope">{{
     scope.row.startTime ? scope.row.startTime : "--"
   }}</template>
 </el-table-column>

下班~

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-03-18，如有侵权请联系 cloudcommunity@tencent.com 删除

scope