以下是使用: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: "-"; } }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通