首页layui table 一列展示多张图片完整页面示例

layui table 一列展示多张图片完整页面示例

时间: 2024-10-26 13:17:26 浏览: 39

layui是一个轻量级的前端UI库，用于快速构建Web界面。如果你想在layui的table组件中显示一列包含多张图片，你可以通过HTML模板和JavaScript来实现。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/layui@2.9.1/dist/layui.css"> </head> <body> <div id="app"></div> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.9.1/layui.js"></script> <script> layui.use(['table', 'layedit'], function(){ var $ = layui.$, layedit = layui.layedit; // 初始化表格数据 var data = [ {id: 1, picList: ['image1.jpg', 'image2.jpg', 'image3.jpg']}, {id: 2, picList: ['image4.jpg', 'image5.jpg', 'image6.jpg']} // ... 更多数据行 ]; // 表格配置 var table = { elem: '#app', url: '', // 如果有动态加载数据，这里填API地址 columns: [{ field: 'picList', title: '图片列表', render: function(value, type, record) { // 使用自定义渲染函数 return '<a href="" class="img-container">'+ '<img src="' + value[0] + '" alt="图片1">'+ '<img src="' + value[1] + '" alt="图片2">'+ '<img src="' + value[2] + '" alt="图片3">'+ '</a>'; } }, ...其他列配置] }; // 初始化表格 layui.table.render(table); }); </script> <style> .img-container { display: inline-block; width: 100px; /* 根据需要调整 */ margin-right: 10px; } </style> </body> </html> ``` 在这个例子中，我们创建了一个`picList`字段，它是一个数组，每个元素代表一张图片的URL。我们在表格列的render函数中，遍历这个数组并插入到HTML结构中。每个图片都是独立的<a>标签，方便点击预览。

阅读全文