以下是使用:empty 搭配before实现表格中数据为空时的默认展示

以下是使用:empty 搭配before实现表格中数据为空时的默认展示

// 在文件.vue中的table<template><!-- 省略其他代码 --><el-table-column prop="title" label="标题"></el-table-column><el-table-column prop="desc" label="配置描述"></el-table-column><!-- 省略其他代码 -->
</template>

// element.scss 在样式文件中 修改element表格的样式 
.el-table {// 这段样式是处理表格中数据为空时则展示 "-"，注意：这里是只针对用非自定义展示内容的处理.el-table__body td .cell:empty::before {content: "-";}
}

 

// 在文件.vue中的table<template><!-- 省略其他代码 --><el-table-column prop="remark" label="日志备注"><template #default="{ row }"><div class="scope-render"><span>{{ row.remark }}</span><el-icon v-copy="row.remark"><CopyDocument /></el-icon></div></template></el-table-column><!-- 省略其他代码 -->
</template>

// element.scss 在样式文件中 修改element表格的样式 
.el-table {// 这段样式是处理表格中数据为空时则展示 "-"，注意：这里是只针对用非自定义展示内容的处理.el-table__body td .cell:empty::before,// 这一行是可以针对表格自定义默认内容做空处理.el-table__body td .cell .scope-render div span:empty::before {content: "-";}
}