前言后台管理系统最常见的需求就是表格列表渲染拿到后端返回的接口数组数据循环拼接 HTML 渲染到页面。很多新手会遇到几个典型问题接口无数据时不会展示「暂无数据」图片地址有的带完整 http 域名、有的只返回相对路径图片加载失败模板字符串拼接逻辑混乱图片、状态文字不知道怎么嵌入循环不清楚三元表达式在模板内怎么使用今天结合项目实战代码完整讲解一套通用的列表渲染方案。一、整体思路梳理整套渲染流程固定分为 4 步声明空字符串变量 html用来持续拼接所有行 HTML 代码边界判断如果接口返回数组长度为 0直接渲染「暂无数据」终止后续逻辑for 循环遍历接口数组单条数据使用 item 接收优先处理图片字段兼容「完整网络地址 / 相对路径」两种情况无图展示默认文字状态字段直接利用三元表达式渲染不同文字 / 样式使用模板字符串 拼接当前行所有单元格 HTML循环结束后一次性把拼接好的 html 塞入页面容器完成渲染小优化不要在循环里频繁执行.html()多次操作 DOM 性能差全部拼接完成再一次性渲染。二、完整代码实现渲染函数主体javascript运行function renderList(data) {// 定义空字符串承载拼接的htmllet html ‘’;// 【边界处理无数据场景】 if (data.length 0) { html div classtable_row div classtable_cell stylewidth:100%;text-align:center;暂无数据/div /div; $(#tableBody).html(html); return; // 终止函数不再执行循环 } // 循环遍历接口每一条数据 for (let i 0; i data.length; i) { let item data[i]; // item 当前循环的单条数据 // 单独处理图片逻辑 // 默认没有图片展示文字 let imgHtml span stylecolor:#999;font-size:12px;暂无照片/span; // 判断当前条目存在图片字段 if (item.img) { // startsWith 判断字符串开头是否包含http // 兼容两种情况后端返回完整url / 只返回相对路径 let src item.img.startsWith(http) ? item.img : http item.img; // 覆盖默认值生成图片标签 imgHtml img src${src} classtable-img-preview stylewidth:68px;height:43px;object-fit:cover;cursor:pointer;border-radius:4px; alt商品图片; } // 拼接单行HTML html ul classtable_row li classcell_check input typecheckbox classitem-checkbox value${item.id} /li li classcell_id${item.id}/li li classcell_name${item.content}/li !-- 状态渲染三元表达式切换class与文字 -- li classcell_name span classstatus-btn ${item.type 1 ? 1 : 2} ${item.type 1 ? 上架 : 下架} /span /li li classcell_name span classstatus-btn ${item.status 1 ? 1 : 2} ${item.status 1 ? 是 : 否} /span /li !-- 图片单元格直接引入预处理好的imgHtml -- li classcell_name${imgHtml}/li li classcell_name${item.create_time}/li li classcell_name${item.update_time ? item.update_time : item.create_time}/li li classcell_operation button classbtn-edit>变量注入数据循环结束后统一{变量}注入数据 循环结束后统一变量注入数据循环结束后统一(容器).html(html)渲染 DOM渲染完成执行后置方法样式、事件绑定五、拓展小提示不要在循环内执行 DOM 操作多次.append()频繁重绘页面性能更低如果使用分页每次切换页码直接调用renderList(当前页数据)刷新列表编辑、删除按钮带上data-id“${item.id}”后续通过事件委托拿到当前条目 ID如果有多图展示可以把imgHtml改成循环拼接多张图片六、调用示例发起接口请求拿到数据后直接调用渲染函数javascript运行function getList() {$.get(‘/api/getData’, function(res) {// res.data 就是后端返回的数组renderList(res.data);})}// 页面加载初始化getList();
