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": ""
}]
}