Layui 数据表格左右固定，内容换行为两行。且有字段隐藏

古城微笑少年丶 2023-02-17 01:18 15阅读 0赞

# 效果图： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70][]

>  **设置每行的css：**

**layui渲染表格时进行设置：**

//展示已知数据
            table.render({
                elem: '#table_data'
                , url: 'url'
                , cols: [[
                    {fixed: 'left',type:'checkbox',align: 'center'},//type 为 numbers及开启自动序号 与前面的 field无关
                    {field: 'signId', align: 'center', title: 'signId'},
                    {toolbar: '#organizationAndNumber', align: 'center', title: '报考机构',width:'130'},
                    {fixed: 'right',title: '操作', align: 'center', toolbar: '#bar',width:'130'}
                ]]
                , page: true //是否显示分页
                , limits: [10, 20, 50, 100]
                , limit: 10 //每页默认显示的数量
                , id: "tableReload"
                , where: {}
                , text: {
                    none: '暂无相关数据'
                },
                done:function (res, curr, count) {
                    //隐藏列
                    $(".layui-table-box").find("[data-field='signId']").css("display","none");
    
    //遍历设置每行高度
    
                    $(".layui-table-main  tr").each(function (index ,val) {
    
                        $($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
                    });
                }
            });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200610154156242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t,size_16,color_FFFFFF,t_70