Vue+Element-UI见博文：Vue+Element表格动态列+表格分页
LayUI效果如下：
引入文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-1.9.0.min.js" ></script>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="../../js/url.js"></script>
<link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
<title>LayUI+JavaScript表格动态列+表格分页</title>
</head>
先初始化一个table，然后对table进行渲染
<body>
<!-- table，注意id、lay-filter -->
<table id="allChannel" lay-filter="test3" lay-even lay-skin="nob"></table>
<!-- 最右边操作列定义，注意id -->
<script type="text/html" id="barDemo">
<!-- lau-event点击触发的事件 -->
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
接着
<script>
layui.use('table', function(){
//表头str数组，field及title是必要的
var str = [{field:"id", title:"ID"},{field:"title", title:"节目名称"}];
$.ajax({ //请求表头中动态部分，返回结果是List<Map>
type:"get",
url:getURL("properties"),
dataType : "json",
success:function(data) {
for(var i = 0 ; i < data.length ; i++){
var field = data[i].propertyName;
var title = data[i].propertyShow;
str.push({field:field, title:title}); //遍历 push
}
//最后一列操作列，toolbar: '#barDemo'与上一致
str.push({fixed: 'right',title:'操作', width:150, align:'center', toolbar: '#barDemo'});
var table = layui.table;
table.render({
elem: '#allChannel'
// ,toolbar: '#toolbarDemo'
,cellMinWidth: 80
,url: getURL("list") //请求表格数据
,response:{
statusCode: 200
} //LayUI表格请求数据返回格式下面会有展示
,cols: [str] //表头数组就是处理完的str
,page: true //与Element-UI最不同的是LayUI表格的分页只需要这一行
,text: {
none: '没有节目~'
} //如果返回数据为空，提示 没有节目~
});
//事件
table.on('tool(test3)', function(obj){
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
if(layEvent === 'del'){ //删除
layer.confirm('确定删除节目么', function(index){
obj.del(); //删除对应行
$.ajax({
url: getURL("delete"),
method: "POST",
data: {
id: data.id
},
success: function (data) {
layer.alert(data)
}
})
layer.close(index);
});
} else if(layEvent === 'edit'){ //编辑
window.location.href=getURL("pages/property/modify.html")+"?id="+data.id
}
});
}
});
});
</script>
</body>
</html>
返回数据参考：
getURL(“properties”)返回数据如下：
[{
"propertyName": "actors",
"propertyShow": "演员"
}, {
"propertyName": "points",
"propertyShow": "评分"
}, {
"propertyName": "release_time",
"propertyShow": "上映时间"
}, {
"propertyName": "dfdfds",
"propertyShow": "测试"
}, {
"propertyName": "desc",
"propertyShow": "简介"
}]
getURL(“list”)
list?page=1&limit=10返回数据
{
"code": 200,
"size": 10,
"count": 12,
"curr": 1,
"data": [{
"actors": "没有48787",
"id": "10270",
"title": "测试",
"points": "10",
"release_time": "2019.08.09",
"desc": "测试"
}, {
"actors": "1",
"id": "10271",
"title": "测试",
"points": "2",
"release_time": "3",
"desc": "4"
}, {
"actors": "12",
"shuxing": "12",
"name": "",
"id": "10272",
"title": "测试添加",
"points": "23",
"desc": "12"
}, {
"actors": "没有",
"shuxing": "测试",
"id": "10274",
"title": "测试1",
"points": "10",
"desc": "简介也没有"
}, {
"actors": "没有",
"shuxing": "测试",
"id": "10275",
"title": "测试1",
"points": "10",
"desc": "简介也没有"
}, {
"actors": "",
"shuxing": "",
"id": "10276",
"title": "测试2",
"points": "",
"desc": ""
}, {
"actors": "",
"shuxing": "",
"id": "10277",
"title": "测试3",
"points": "",
"desc": ""
}, {
"actors": "",
"shuxing": "",
"id": "10278",
"title": "测试4",
"points": "",
"desc": ""
}, {
"actors": "",
"shuxing": "",
"id": "10279",
"title": "测试5",
"points": "",
"desc": ""
}, {
"actors": "",
"shuxing": "",
"id": "10280",
"title": "测试6",
"points": "",
"desc": ""
}]
}