其他分享
首页 > 其他分享> > layui table合并单元格

layui table合并单元格

作者:互联网

想要合并单元内容,可以试试函数转义的方法

函数转义。自 layui 2.2.5 开始,templet 开始支持函数形式,函数返回一个参数 d,包含接口返回的所有字段和数据。如下所示:

Code layui.code

1.	table.render({
2.	  cols: [[
3.	    {field:'title', title: '文章标题', width: 200
4.	      ,templet: function(d){
5.	        return 'ID:'+ d.id +',标题:<span style="color: #c00;">'+ d.title +'</span>'
6.	      }
7.	    }
8.	    ,{field:'id', title:'ID', width:100}
9.	  ]]
10.	});    

下面是我写的部分代码,仅供参考,

HTML代码:

<div class="col-lg-9 pr-4 px-1">
                <strong>用户银行账户列表</strong>
                <table id="tbBankAccount" layui-filter="tbBankAccount"></table>
            </div>

表头参数:

cols: [[ //表头
                        { title: '序号', type: 'numbers' },//序号列,title设定标题名称
                        { field: 'BankAccountID', title: 'BankAccountID', hide: true },
                        { field: 'UserName', title: '用户名' ,align: 'center'},
                        { field: 'RealName', title: '真实姓名', align: 'center' },
                        { field: 'BankName', title: '所属银行', align: 'center' },
                        {
                            field: 'telephone', title: '所在地', align: 'center'
                        , templet: function (d) {
                            return d.ProvinceName + '<span style="color: #c00;">' + d.CityName + '</span>'//省份和城市合并
                        }
                        },
                        { field: 'OpeningBranchName', title: '支行', align: 'center' },
                        { field: 'BankAccount', title: '提现账号', align: 'center' },
                        { title: '操作', templet: setOperate, width: 100, align: 'center', fixed: 'right' }//width: 160 指定宽度,align 指定对其方式
                    ]],

效果:把省份和城市合并
在这里插入图片描述

标签:templet,center,title,layui,align,单元格,field,table,width
来源: https://blog.csdn.net/qq_44543292/article/details/91353828