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;  // 設置一個元素的垂直對齊方式
      }
    }
  }