问题
使用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\" ></i>\n" +
" </button>" +
"<button οnclick=\"editLine(this)\" type=\"button\" title='修改' class=\"layui-btn layui-btn-deepRed\">\n" +
" <i class=\"layui-icon\" aria-hidden=\"true\" ></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'},//分页颜色
});
原文地址:https://wu55555.blog.csdn.net/article/details/110533156