经常会有一些字段,后端接口返回为null或空字符串,展示到前端表格中会以空白显示,影响美观。
除了通过slot对每一列单独做判断外,我们通过统一设置el-table的样式来解决此问题,统一设置默认值。
::v-deep .el-table :empty::before{
content: '--';
color: #fff;
}
或者
::v-deep.el-table {
.cell:empty::before {
content: "--";
}
.is-leaf {
.cell:empty::before {
content: "--";
}
}
}
此举可以将表格中的空字段附上默认值。
但有一点需要注意,当某一列没有绑定字段,而是作为表格的操作列进行展示时,此方法可能会出现问题,使用后请多调试。