layui table 一列展示多张图片 完整页面示例
时间: 2024-10-26 15:17:26 浏览: 15
用于layui table 自定义列
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>标签,方便点击预览。
阅读全文