问题

使用layui渲染table,加载出来的表格表头与表体错位了,但是点击新增重新渲染又能对齐
在这里插入图片描述

解决

查阅了相关资料,有以下几种情况
1、cols中的数据多了一个逗号,导致渲染出现问题,这个问题我检查了并没有多出逗号
2、cols没有定义列宽,给每个列添加宽度:width:80,问题解决

table.render({
        elem: '#add_table' //指定原始表格元素选择器(推荐id选择器)
        // ,height: 500 //容器高度
        // ,width:800
        , limit: result.length // 最多显示的条数
        , cols: [[
            {field: 'id', title: '主键',minWidth:20, hide: true},
            {field: 'operation',width:80, title: '操作', align: 'center', templet: function (d) {
                    var btn = "<button οnclick=\"removeLine(this)\" type=\"button\" title='删除' class=\"layui-btn layui-btn-deepRed\">\n" +
                        "                            <i class=\"layui-icon\" aria-hidden=\"true\" >&#xe67e;</i>\n" +
                        "                        </button>" +
                        "<button οnclick=\"editLine(this)\" type=\"button\" title='修改' class=\"layui-btn layui-btn-deepRed\">\n" +
                        " <i class=\"layui-icon\" aria-hidden=\"true\" >&#xe642;</i>\n" +
                        " </button>";
                    return btn;
                }
            },
            {
                field: 'type', width:50, title: '条件类型', templet: function (d) {
                    if (d.type === 1) {
                        return "条件";
                    } else {
                        return "要求";
                    }
                }
            },
            {
                field: "table", width:80, title: "表名", templet: function (d) {
                    if(d.table != null && d.table.tableName){
                        return d.table.tableName;
                    }else{
                        return "";
                    }

                }
            },
            {field: "tableId",width:80,  title: "表ID", hide: true},
            {
                field: 'property', width:80, title: '字段', templet: function (d) {
                    return setDictionary(d.property);
                }
            },
            {field: 'operator',width:80, title: '运算符'},
            {
                field: 'value',width:80,  title: '值', sort: true, templet: function (d) {
                    if (d.valueType === 1) {
                        return d.value;
                    } else {
                        if(d.valueTable != null){
                            if(d.valueTable.tableName != null){
                                return d.valueTable.tableName + "/" + setDictionary(d.valueProperty);
                            }
                        }
                        return "";
                    }
                }
            },
            {
                field: 'minAndMax',width:80,  title: '第n,m位', templet: function (d) {
                    if (d.operatorMin != null && d.operatorMax != null) {
                        return d.operatorMin + "," + d.operatorMax;
                    } else {
                        return "";
                    }
                }
            },
            {
                field: 'valueType',width:80,  title: '值类型', templet: function (d) {
                    if (d.valueType === 1) {
                        return "固定值";
                    } else {
                        return "字段值";
                    }
                }
            }
        ]],//设置表头
        //,…… //更多参数参考右侧目录:基本参数选项
        data: result,
        done: function () {
            tdTitle(6);
        }
        // loading:true,
        // page:{theme: '#c00'},//分页颜色
    });

在这里插入图片描述

QQ + 微信

原文地址:https://wu55555.blog.csdn.net/article/details/110533156