layui 彈出層中顯示table 表格

html：

點擊按鈕顯示彈窗：

<script type="text/html" id="openProductCount">
	<a href="javascript:;" class="layui-table-link" style="display: inline-block; width: 100%;" οnclick="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;" οnclick="activeState(\'' + d.productId +
										'\')">未激活</span>'
								} else {
									return '<span class="layui-badge layui-bg-green" style="cursor: pointer;">已激活</span>'
								}
							},
							sort: true //是否允許排序 默認：false
							//fixed: 'left' //固定列
						}]
					]
				});
			}
		});
	});
}