当前位置:   article > 正文

VUE 字段为空时,一个class搞定,适用多种情形

VUE 字段为空时,一个class搞定,适用多种情形

我抄的,我抄的,我抄的,我抄的,我抄的 但真香

在写表格时,当某字段为空,你是否是这样写的:

<el-table-column label="更新时间" align="center" prop="updateTime">
   <template slot-scope="scope">
       {{ scope.row.updateTime || '--'}}
   </template>
</el-table-column>
  • 1
  • 2
  • 3
  • 4
  • 5

如果有多个字段需要判断,你是否要写多个空字段的判断???
回答我,是或者不是!!!

在下不才,写了个适用于大多数el-table、el-description、el-collapse等、但不限于这些内容的空字段通用样式,只要是用css的都适用。只需要在父节点添加该类名,即可把所有空字段都替换为‘-’(根据需要可自定义,也可以为‘/’、‘–’等,只需要改变以下样式里的content:’-’;)
类名如下:

.emptyText :empty:not(
  i,
  tbody,
  .el-checkbox__inner,
  .el-table__fixed-right-patch,
  .el-switch__core,
  .el-color-picker__icon,
  .el-color-picker__mask,
  .el-radio__inner
)::before {
  content: '-';
  color: #606266;
}
``

用法
以表格为例:

```html
<el-table class="emptyText" :data="tableData">
    <el-table-column label="更新时间" prop="updateTime "/>
    ……
</el-table>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/91849
推荐阅读
相关标签
  

闽ICP备14008679号