css实现

/* 空列表状态通用css */
.list-auto-empty:empty::after {content: attr(empty);color: gray;margin: 50px auto 0;background-image: url('empty_data.png');background-size: 100%;background-repeat: no-repeat;width: 224px;height: 140px;padding-top: 140px;text-align: center;
}

html使用

<div class="list list-auto-empty" empty="Empty data">

注意：attr(empty) 用于获取 empty 属性值，设置提示文字

特殊情况，无效（包含空格）

<div class="list-auto-empty" empty="Empty data"> </div>

增加脚本处理（文件发生变化后重新执行）

// 使用jQuery遍历所有的div元素
$('.list-auto-empty').each(function() {// 使用$.trim()函数去除元素内容的前后空白字符let content = $.trim($(this).text());// 如果内容为空，则添加'empty-like'类名if (content === '') $(this).addClass('empty-like');
});

最终css

.list-auto-empty.empty-like::after,
.list-auto-empty:empty::after {content: attr(empty);color: gray;margin: 50px auto 0;background-image: url('empty_data.png');background-size: 100%;background-repeat: no-repeat;width: 224px;height: 140px;padding-top: 140px;text-align: center;
}

最终辅助 js 脚本（监听.list-auto-empty中的变化重新处理.empty-like）

// 空列表辅助方法
function listEmptyHandler() {const func = (_this) => {// 使用trim()函数去除元素内容的前后空白字符const content = $(_this).text();const html = $(_this).html();// 如果内容为空，则添加'empty-like'类名if (content.trim() == '' && html.trim() == '') $(_this).addClass('empty-like');else $(_this).removeClass('empty-like');};$('.list-auto-empty').each(function () {func(this);const $element = $(this)[0];const observer = new MutationObserver(() => func(this));if ($element) {observer.observe($element, {attributes: true, // 观察属性变化childList: true, // 观察子节点的变化subtree: true, // 观察后代节点的变化characterData: true, // 观察文本内容的变化characterDataOldValue: true, // 观察文本内容变化时，保存旧值});}});
}

使用 html示例

<div class="list list-auto-empty" empty="Empty data">