layui 弹出层中显示table 表格

最新推荐文章于 2025-05-26 12:38:52 发布

小贵子的博客

最新推荐文章于 2025-05-26 12:38:52 发布

阅读量2.2w

点赞数 9

CC 4.0 BY-SA版权

分类专栏： layui 文章标签：弹窗

本文链接：https://blog.youkuaiyun.com/zyg1515330502/article/details/98209448

layui 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用LayUI框架实现一个包含产品查询和展示功能的实时弹窗。通过HTML、JavaScript和Vue.js的结合，展示了如何响应式地创建弹窗界面，动态加载表格数据，并实现分页、排序等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html：

点击按钮显示弹窗：

<script type="text/html" id="openProductCount">
	<a href="javascript:;" class="layui-table-link" style="display: inline-block; width: 100%;" onclick="openProductCount('{{d.companyId}}')">{{d.openProductCount}}</a>
</script>

弹窗模板：

<div id="openProductBox" style="display: none; padding: 10px;">
	<div style="margin-bottom: 10px;">
		<span>产品名称：</span>
		<div class="layui-inline">
		    <input type="text" autocomplete="off" placeholder="产品名称" class="layui-input" style="height:32px;" v-model="open.productName"
						 @keyup.enter="openQuery">
		</div>
		<button class="layui-btn layui-btn-sm" @click="openQuery"><i class="layui-icon layui-icon-search"></i>&nbsp;查询</a>
	</div>
	<table id="openProductTable" lay-filter="openProductTable"></table>
</div>

js：

var table2;

function openProductCount(companyId) {
	fkCompanyId = companyId;
	layui.use(['table', 'form'], function() {
		table2 = layui.table;
		var form = layui.form;
		layer.open({
			type: 1,
			title: '开通产品数量',
			area: ['700px', '600px'], //宽高
			content: $('#openProductBox'),
			end: function() {
				vm.query.productName = '';
			},
			success: function() {
				table2.render({
					elem: '#openProductTable',
					id: 'openProductTable',
					height: 480,
					method: 'get', //接口http请求类型，默认：get
					url: baseURL + 'unCompanyAccountInfo/queryCompanyProductMergerList', //?page=1&limit=10（该参数可通过 request 自定义）
					where: {
						fkCompanyId: companyId,
					}, //接口的其它参数
					request: {
						pageName: 'page', //页码的参数名称，默认：page
						limitName: 'rows', //每页数据量的参数名，默认：limit
					},
					response: {
						statusName: 'code', //规定数据状态的字段名称，默认：code
						statusCode: 200, //规定成功的状态码，默认：0
						msgName: 'msg', //规定状态信息的字段名称，默认：msg
						countName: 'count', //规定数据总数的字段名称，默认：count
						dataName: 'resultList', //规定数据列表的字段名称，默认：data
					},
					page: true, //是否分页
					limit: 10, //每页显示的条数
					limits: [10, 20, 30], //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
					cols: [
						[{
							field: 'productName', //字段名
							title: '产品名称', //标题
							//width: 200,
							sort: true //是否允许排序 默认：false
							//fixed: 'left' //固定列
						}, {
							field: 'totalNumber', //字段名
							title: '总次数', //标题
							width: 100,
							sort: true //是否允许排序 默认：false
							//fixed: 'left' //固定列
						}, {
							field: 'lastNumber', //字段名
							title: '剩余次数', //标题
							width: 100,
							templet: '#lastNumber',
							sort: true //是否允许排序 默认：false
							//fixed: 'left' //固定列
						}, {
							field: 'channelName', //字段名
							title: '当前渠道', //标题
							width: 165,
							sort: true //是否允许排序 默认：false
							//fixed: 'left' //固定列
						}, {
							field: 'fkCompanyId', //字段名
							title: '状态', //标题
							width: 100,
							templet: function(d) {
								if (d.fkCompanyId == null) {
									return '<span class="layui-badge" style="cursor: pointer;" onclick="activeState(\'' + d.productId +
										'\')">未激活</span>'
								} else {
									return '<span class="layui-badge layui-bg-green" style="cursor: pointer;">已激活</span>'
								}
							},
							sort: true //是否允许排序 默认：false
							//fixed: 'left' //固定列
						}]
					]
				});
			}
		});
	});
}