When the data in the el-table table is empty, the table items display——

Today I will record how to use el-table to display empty table items using "--" symbols or other mark symbols.

Two methods, one is through the template tag, the other is through the css pseudo-class: empty selector

1. template tag

 <el-table-column label="操作时间">
      <template slot-scope="scope">{
    
    {
    
    scope.row.time? scope.row.time: '--'}}</template>
    </el-table-column>

2. CSS pseudo-class: empty selector

Set the class name for el-table and set the corresponding css style according to the name

<el-table :data="tableData"  class="tableData">
      <el-table-column type="index" label="序号" width="100"/>
     	....
      <el-table-column property="lastlogin" label="最后操作时间"/>
    </el-table>

css：

/* 表格数据为空时显示——*/
.tableData :empty::before{
    
    
	content:'——';
}

Effect: