数据表格出现问题!!!

建议 未结 3 374
luo381821
luo381821 2019-1-24
悬赏:20飞吻
数据表格:一个页面同时存在两个table,调用render方法,固定列有BUG。
当渲染第二个表格的时候,固定列出现偏差,相当之难看。代码如下
var table = layui.table;
//第一个实例
table.render({
elem: '#tabe-1'
,height: 312
,url: '/demo/table/user/' //数据接口
,page: true //开启分页
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '签名', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
]]
});

//第一个实例
table.render({
elem: '#table-2'
,height: 312
,url: '/demo/table/user/' //数据接口
,page: true //开启分页
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '签名', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
]]
});
回帖
  • 看一下图片
    0 回复
  • 无图无真相[哈哈]
    0 回复
  • ashan
    2019-1-24
    @luo381821
    根据你的代码没有出现偏差,看看是不是有其他样式影响了



    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>
    <table class="layui-hide" id="tabe-1"></table>
    <div style="margin-top:35px"></div>
    <table class="layui-hide" id="table-2"></table>
    <script type="text/html" id="usernameTpl">
    {{# if(d.username!=null && d.username!=""){ }}
    <a href="http://localhost:8080/DispatchAction.do?efFormEname=FDWB0007&date_t=20190111&webcode " target="_blank"><span class="">(外链)</span>{{d.username}}</a>
    {{# }else{ }}
    {{d.username}}
    {{# } }}
    </script>
    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
    layui.use('table', function() {
    var table = layui.table;
    //第一个实例
    table.render({
    elem: '#tabe-1'
    ,height: 312
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
    ,{field: 'username', title: '用户名', width:80}
    ,{field: 'sex', title: '性别', width:80, sort: true}
    ,{field: 'city', title: '城市', width:80}
    ,{field: 'sign', title: '签名', width: 177}
    ,{field: 'experience', title: '积分', width: 80, sort: true}
    ,{field: 'score', title: '评分', width: 80, sort: true}
    ,{field: 'classify', title: '职业', width: 80}
    ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
    });

    //第一个实例
    table.render({
    elem: '#table-2'
    ,height: 312
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
    ,{field: 'username', title: '用户名', width:80}
    ,{field: 'sex', title: '性别', width:80, sort: true}
    ,{field: 'city', title: '城市', width:80}
    ,{field: 'sign', title: '签名', width: 177}
    ,{field: 'experience', title: '积分', width: 80, sort: true}
    ,{field: 'score', title: '评分', width: 80, sort: true}
    ,{field: 'classify', title: '职业', width: 80}
    ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
    });
    });
    </script>
    </body>
    </html>
    0 回复