layui表头自定义

4 篇文章 1 订阅

在这里插入图片描述

var tableData = [
			[ //标题栏
				{field: 'date',align: 'center', title: '日期', width: 130, rowspan: 3} //rowspan即纵向跨越的单元格数
				,{align: 'center', title: '第三方支付', colspan: 8}
				,{align: 'center', title: '积分支付', colspan: 8}
				,{align: 'center',align: 'center', title: '其他', colspan: 3, rowspan: 2}
				,{field: 'new_user',align: 'center', title: '新增用户', rowspan: 3}
				,{align: 'center', title: '操作', rowspan: 3,templet: function (d)
                {
                    return '<button class="layui-btn layui-table-btn layui-btn-xs" lay-event="refresh">刷新</button>';
                }}
			], 
			[ //标题栏
				{align: 'center', title: '订单数量', colspan: 4}
				,{align: 'center',align: 'center', title: '订单金额', colspan: 4} //colspan即横跨的单元格数,这种情况下不用设置field和width
				,{align: 'center', title: '积分支付订单数量', colspan: 4}
				,{align: 'center',align: 'center', title: '积分支付订单金额', colspan: 4} //colspan即横跨的单元格数,这种情况下不用设置field和width
				,{align: 'center',align: 'center', title: '', colspan: 3}
			], 
			[
				{field: 'ordinary_order_num', title: '普通订单',align: 'center'}
				,{field: 'upgrade_order_num', title: '升级订单',align: 'center'}
				,{field: 'repurchase_order_num', title: '复购订单',align: 'center'}
				,{title: '总计',align: 'center',templet: function (d)
                {
                    return parseInt(d.ordinary_order_num)+parseInt(d.upgrade_order_num)+parseInt(d.repurchase_order_num);
                },style:'color:red;'}
				,{field: 'ordinary_order_amount', title: '普通订单',align: 'center'}
				,{field: 'upgrade_order_amount', title: '升级订单',align: 'center'}
				,{field: 'repurchase_order_amount', title: '复购订单',align: 'center'}
                ,{title: '总计',align: 'center',templet: function (d)
                {
                    return parseFloat(d.ordinary_order_amount)+parseFloat(d.upgrade_order_amount)+parseFloat(d.repurchase_order_amount);
				},style:'color:red;'},
				{field: 'integral_ordinary_order_num', title: '普通订单',align: 'center'}
				,{field: 'integral_upgrade_order_num', title: '升级订单',align: 'center'}
				,{field: 'integral_repurchase_order_num', title: '复购订单',align: 'center'}
				,{title: '总计',align: 'center',templet: function (d)
                {
                    return parseInt(d.integral_ordinary_order_num)+parseInt(d.integral_upgrade_order_num)+parseInt(d.integral_repurchase_order_num);
                },style:'color:red;'}
				,{field: 'integral_ordinary_order_amount', title: '普通订单',align: 'center'}
				,{field: 'integral_upgrade_order_amount', title: '升级订单',align: 'center'}
				,{field: 'integral_repurchase_order_amount', title: '复购订单',align: 'center'}
                ,{title: '总计',align: 'center',templet: function (d)
                {
                    return parseFloat(d.integral_ordinary_order_amount)+parseFloat(d.integral_upgrade_order_amount)+parseFloat(d.integral_repurchase_order_amount);
                },style:'color:red;'}
				,{field: 'share_amount', title: '分成金额',align: 'center'}
				,{field: 'withdrawal_amount', title: '已提现金额',align: 'center'}
				,{field: 'refund_amount', title: '退款金额',align: 'center'}
			]
		];

        var options = {
            elem: '#table'
            ,id: 'table'
			,url: "statistic-api/statistics-day?staff_id="+staff_id+"&staff_token="+staff_token
			,width: 2392
			,height: tableHeight
            ,page: true //开启分页
            ,limit: 16
            ,limits: [16,20,30,40,50]
            ,cols: tableData
        };

        Table = table.render(options);
<div class="table-body">
							<table class="layui-table" style="margin: 0;">
								<thead>
									<tr>
										<th style="width: 45px;">日期</th>
										<th style="width: 45px;">记帐码</th>
										<th style="width: 90px;">科目</th>
										<th style="width: 90px;">凭证货币金额</th>
										<th style="width: 90px;">本位币金额</th>
										<th style="width: 90px;">成本中心</th>
										<th style="width: 90px;">利润中心</th>
										<th style="width: 90px;">资金代码</th>
										<th style="width: 90px;">摘要</th>
										<th style="width: 90px;">制单人</th>
										<th style="width: 90px;">审核人</th>
										<th style="width: 90px;">操作</th>
									</tr>
								</thead>
								<tbody>
									<template v-for="item in list">
										<tr>
											<td style="width: 65px;" :rowspan="item.subjects.length">{{item.added_time}}</td>
											<td style="width: 45px;" :rowspan="item.subjects.length">{{item.subjects[0].accounting_code}}</td>
											<td style="width: 90px;">{{item.subjects[0].subject_name}}</td>
											<td style="width: 90px;">{{item.subjects[0].amount_of_voucher_currency}}</td>
											<td style="width: 90px;">{{item.subjects[0].amount_in_local_currency}}</td>
											<td style="width: 90px;">{{item.subjects[0].cost_center}}</td>
											<td style="width: 90px;">{{item.subjects[0].profit_center}}</td>
											<td style="width: 90px;">{{item.subjects[0].fund_code}}</td>
											<td style="width: 90px;">{{item.subjects[0].summary}}</td>
											<td style="width: 90px;" :rowspan="item.subjects.length">{{item.creator}}</td>
											<td style="width: 90px;" :rowspan="item.subjects.length">{{item.reviewer}}</td>
											<td style="width: 45px;" :rowspan="item.subjects.length">
												<button class="layui-btn icon-btn layui-btn-normal layui-btn-xs" @click="edit(item)" >编辑</button>
												<button class="layui-btn icon-btn layui-btn-danger layui-btn-xs" @click="del(item)" >删除</button>
												<button class="layui-btn icon-btn layui-btn-normal layui-btn-xs" @click="writeoff(item)" >冲销</button>
												<button class="layui-btn icon-btn layui-btn-normal layui-btn-xs" @click="writeoff(item)" >审核</button>
											</td>
										</tr>
										<tr v-for="item1,key in item.subjects" v-show="key > 0">
											<td style="width: 90px;">{{item1.subject_name}}</td>
											<td style="width: 90px;">{{item1.amount_of_voucher_currency}}</td>
											<td style="width: 90px;">{{item1.amount_in_local_currency}}</td>
											<td style="width: 90px;">{{item1.cost_center}}</td>
											<td style="width: 90px;">{{item1.profit_center}}</td>
											<td style="width: 90px;">{{item1.fund_code}}</td>
											<td style="width: 90px;">{{item1.summary}}</td>
										</tr>
									</template>
								</tbody>
							</table>
						</div>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值