表格固定有问题啊

提问 未结 0 104
luo381821
luo381821 2019-7-15
悬赏:20飞吻
版本:layui 2.4.5 浏览器:
我的界面里面有一个tab选项卡,包含table1,table2,table3。table1的固定列是正常的,但是table2和table3的固定有问题。具体问题为:当移动滚动条时,表头处于固定状态,但是数据行随着滚动条的移动而移动!!!!!!
补充:界面不存在tab时,渲染多个table没问题。但是选项卡里面包含table时,出现定位偏差。
<div class="layui-tab" lay-filter="billAccountTab" style="margin-top: 10px;">
<ul class="layui-tab-title">
<li lay-id="tab-1" class="layui-this">表格1</li>
<li lay-id="tab-2" >表格2</li>
<li lay-id="tab-3" >表格3</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<table class="layui-table" lay-filter="table1" id="table1"></table>
</div>
<div class="layui-tab-item">
<table class="layui-table" lay-filter="table2" id="table2"></table>
</div>
<div class="layui-tab-item">
<table class="layui-table" lay-filter="table3" id="table3"></table>
</div>
</div>
</div>
layui.config({
base: basePath + '/static/plugins/layui/'
}).use(['form', 'table', 'element'], function () {
var table = layui.table,element = layui.element;
var data = {"code":0,"msg":"","count":1000,"data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75}]};
var renderTable = function(tableId){
table.render({
elem: tableId
,data:data.data
,width: 892
,height: 330
,cols: [[
{type:'checkbox', fixed: 'left'}
,{field:'id', width:80, title: 'ID', sort: true, fixed: 'left'}
,{field:'username', width:80, title: '用户名'}
,{field:'sex', width:80, title: '性别', sort: true}
,{field:'city', width:80, title: '城市'}
,{field:'sign', width: 219, title: '签名'}
,{field:'experience', width:80, title: '积分', sort: true}
,{field:'score', width:80, title: '评分', sort: true}
,{field:'classify', width:80, title: '职业'}
,{field:'wealth', width:120, title: '财富', sort: true, fixed: 'right'}
]]
,page: true
});
};
renderTable("#table1");
renderTable("#table2");
renderTable("#table3");
});
回帖
  • 消灭零回复