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