Vue+Element表格动态列+表格分页
LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页
效果如图：
代码：
引用JQuery，Vue，Element等文件，换成自己的路径
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-1.9.0.min.js" >script>
<script src="../../js/url.js">script>
<script src="../../js/vue.js">script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js">script>
<title>表格动态列及分页title>
head>
body
<body>
<div id="list">
<div id="tableComponentApp">
<div>
<div align="right">
<el-button type="text" @click="addProperty()" >新增属性el-button>
<el-button type="text" @click="addChannel()" >新增节目el-button>
div>
<el-table
:data="body.data"
border
style="width: 100%">
<el-table-column
v-for="item in head"
:prop="item.propertyName"
:label="item.propertyShow"
show-overflow-tooltip
>
el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="edit(scope.row.id)" type="text" size="small">编辑el-button>
<el-button @click.native.prevent="deleteById(scope.$index, body,scope.row.id)" type="text" size="small">删除el-button>
template>
el-table-column>
el-table>
<el-pagination background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="body.curr"
:page-sizes="[5, 10, 50, 100, 200]"
:page-size="body.size"
layout="total, sizes, prev, pager, next, jumper"
:total="body.count">
el-pagination>
div>
div>
div>
<script>
new Vue({
el:'#list',
data() {
return {
head:[],//表头
body:{}//表中数据
}
},
created: function() { //初始化表格
var propertiesUrl = getURL("properties");
var channelUrl = getURL("list");
var _this = this;
//请求表头数据，
$.get(propertiesUrl, function (result) {
_this.head = result; //将返回结果赋给表头绑定的body[]
//除了请求的数据外的新增列，除了unshift（放在最前），还有push方法（放在最后）
_this.head.unshift({propertyName:"title", propertyShow:"节目名称"});
_this.head.unshift({propertyName:"id", propertyShow:"ID"});
});
//获取表格数据
$.get(channelUrl, function (result) {
_this.body = result; //将返回结果赋给表格绑定的body[]
})
},
methods: {
deleteById(index,body,id) { //删除操作
var _this = this;
_this.$confirm('此操作将永久删除'+id+', 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//发起删除请求
$.post(getURL("delete"), {id:id}, function (result) {
_this.$alert(result);
if (result == 'success') {
body.data.splice(index, 1); //删除表格中的行
}
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
})
},
edit(id) {
window.location.href=getURL("pages/vue/modify.html")+"?id="+id
},
handleSizeChange(val) { //size改变
console.log(`每页 ${val} 条`);
this.body.size = val;
this.body.curr = 1;
this.getList(); //刷新表格数据，调用getList()
},
handleCurrentChange(val) { //当前页改变
console.log(`当前页: ${val}`);
this.body.curr = val;
this.getList(); //刷新表格数据，调用getList()
},
//获取刷新列表数据
getList() {
var _this = this;
_this.loading = true;
//发起数据获取请求
$.get(getURL("list"), {page: _this.body.curr, limit: _this.body.size}, data => {
_this.loading = false;
_this.body = eval(data)//重新赋值给body[]
})
},
//表格上方按钮绑定方法
addChannel() {
window.location.href=getURL('pages/vue/add.html')
},
addProperty() {
window.location.href=getURL('pages/vue/propertyAdd.html')
}
}
})
script>
body>
html>
head[]返回数据如下：
[{
"propertyName": "actors",
"propertyShow": "演员"
}, {
"propertyName": "points",
"propertyShow": "评分"
}, {
"propertyName": "release_time",
"propertyShow": "上映时间"
}, {
"propertyName": "dfdfds",
"propertyShow": "测试"
}, {
"propertyName": "desc",
"propertyShow": "简介"
}]
body[]返回数据如下：
list?page=1&limit=5
{
"size": 5,
"count": 6,
"curr": 1,
"data": [{
"actors": "actor",
"dfdfds": "ceshi",
"profile": "jianjie",
"id": "10242",
"title": "12314",
"points": "point",
"release_time": "shijian",
"desc": "12314简介"
}, {
"actors": "234",
"dfdfds": "2324",
"profile": "123",
"id": "10243",
"title": "123",
"points": "234",
"release_time": "4354"
}, {
"actors": "32432",
"dfdfds": "2",
"profile": "3243254",
"id": "10244",
"title": "34546",
"points": "1234",
"release_time": "2"
}, {
"actors": "1232444444",
"dfdfds": "11111111111111111111111",
"profile": "123345423",
"id": "10245",
"title": "11111111111111111111111111111",
"points": "1",
"release_time": "1"
}, {
"actors": "",
"dfdfds": "2321",
"profile": "",
"id": "10246",
"title": "21321",
"points": "213",
"release_time": "213"
}]
}