Element表格内的无信息,格子用"-"标识

116 阅读1分钟

先看效果

image.png

如果是单独一列

    <el-table-column :label="$t('organType.parent')" prop="parentTypeName" align="center">

       <template slot-scope="scope">

           {{ scope.row.parentTypeName  ?  scope.row.parentTypeName:'-' }}

      </template>

    </el-table-column>

如果是所有列

对于单个组件:在scoped中 ,样式穿透>>>

  /* el-table列数据为空自动显示-- */

    .el-table >>> .cell:empty::before{

      content:'--';

      color:gray;

    }

全局(不需要加>>>)

 /* el-table列数据为空自动显示-- */

    .el-table .cell:empty::before{

      content:'--';

      color:gray;

    }

注意:这种带title的需要单独处理

使用过滤器局部注册

filters :{

  filterTextEmpty:function (dataStr)  {

    return dataStr ? dataStr:'-'

  },

},