样式如下
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1cc0ffed18cde8723e96c68654c86226.png)
这里我进行修改了layui的样式
空行的实现
js代码
function tableDefaultNull(id, limit) {
let $thead = $(id).next().find(".layui-table-box").find(".layui-table-header").find("table").find("thead").find("tr");
let $tbody = $(id).next().find(".layui-table-box").find(".layui-table-body.layui-table-main").find("table").find("tbody");
let count = $tbody.children("tr").length;
let sl = $thead.children("th").length;
if (count <= 0) {
return;
}
for (let i = 0; i < limit - count; i++) {
let str = "";
for (let j = 0; j < sl; j++) {
if (j == 0) {
str = str + "<tr><td><div class='layui-table-cell laytable-cell-1-0-0'></div></td>";
} else {
str = str + "<td></td>";
if (j == sl - 1) {
str = str + "</tr>";
}
}
}
$tbody.append(str);
}
}
layui代码
table.render({
elem: '#test'
, url: '/a/a/' + layer2id
, cols: [[
{title: '序号', type: 'numbers'},
{field: 'name',align:"center",width:"20%", title: '名称'},
{field: 'pname',width:"20%",align:"center", title: '联系人
'},
{field: 'phone', title: '电话'},
{field: 'areai', title: '所属区域'},
{field: 'aream', title: '地址'},
{field: 'typename', title: '种类名称'},
{align:"center",title: '操作', toolbar: '#barDemo'}
]],
done: function (res, curr, count) {
tableDefaultNull("#test",10);
}
, page: true
, height: 473
});