以下是使用: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: "-";
    }
}
复制代码

 

posted @   磊~~  阅读(6)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示