vue没有数据时展示默认值

第一种情况：普通标签中无数据时默认展示
main.js

Vue.prototype.IsNull=value=>{
  return value || '<span style="opacity: 0.6;">暂无</span>'
}

组件中使用

<span v-html="IsNull(你的数据)"></span>

第二种情况：表格中无数据默认展示
element UI 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: '--';
  }

antVue中在公共样式中加入

.ant-table-tbody {
  td.ant-table-row-cell-break-word:empty::after{
    content:'暂无'; 
    opacity: 0.6;
  }
}

css实现
可以随意用 :empty来识别无数据的标签

//给父级设置class="emptySpan"
.emptySpan{
  span:empty::after{
    content: "暂无"; 
    opacity: 0.6;
  }
}