table表格中 如果没有值 , 默认显示 '--'

主要是  伪类和伪元素 起作用    :empty::after

:empty 选择器匹配没有子元素（包括文本节点）的每个元素。

 

先选中 没有子元素的 格子添加 一个伪元素 ::after内容为 content: '--';

 

vue项目中 在写在了 app.vue 文件中

 /*
    给所有表格空项加上--
  */
  .el-table .el-table__body td .cell:empty::after,
  .el-table .el-table__body td .cell > span:empty::after,
  .el-table .el-table__body td .cell .approval:empty::after,
  .el-table .el-table__body td .cell div:empty::after,
  .el-table .el-table__body td .cell .line-limit-length:empty::after{
    content: '--';
  }

react 项目中写在了 公共样式文件中

  .tableBox {
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.1);
    .ant-table-thead {
      tr th {
        font-size: 16px;
        background: linear-gradient(360deg, #F7F8FC 0%, #FFFFFF 100%);
        color: #999999;
      }
    }
    .ant-table-tbody {
      tr:nth-child(2n + 2) {  // 2n 变色的斑马线样式
        background: #F4F5F8;
      }
      td.ant-table-cell.ant-table-cell-ellipsis:empty::after{
        content:'--';  // 内容为'--'
      }
    }
    .btn {
      cursor: pointer;
      color: #187bdb;
      i {
        font-size: 20px;
        margin-right: 5px;
        vertical-align: sub;  // 设置一个元素的垂直对齐方式
      }
    }
  }