vue+Element实现table渲染+分页
2019-03-15 本文已影响0人
writeanewworld
1.element
vue的组件框架
2.之前后台管理的开发
adminLTE + thymleaf + ajax + api
3.现在开发
layUI + vue + element + ajax + api
4.最近发现这个element配合vue开发后台管理是真的方便，只需要ajax请求接口，将数据拼装成element示例的样子，其余的交给vue就啥也不用管了。比之前自己 夯吃夯吃的造轮子方便多了。
5.效果图一张
image.png
6.代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>签名管理</title>
<script src="../../s/js/vue/vue"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="../../s/js/vue/index.css">
<link rel="stylesheet" href="../../s/css/elementui/display.css">
<!-- 引入组件库 -->
<script src="../../s/js/vue/index.js"></script>
<script src="../../s/js/vue/jquery.1.8.min.js"></script>
<script src="../../s/js/public.js"></script>
<style>
.myspant {
line-height: 36px;
text-align: center;
}
.el-col {
margin-top: 5px;
}
.api_table .el-card__body {
padding: 10px;
}
.el-card {
margin-top: 6px;
}
</style>
</head>
<body>
<div id="app">
<div class="api_search">
<el-row>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>验证类短息发送</span>
</div>
<el-row :gutter="2">
<el-col :xs="10" :sm="2" class="myspant" style="width:auto;height:auto;">
<!--表格-->
<!--v-bind:data="tableData"-->
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%" >
<el-table-column></el-table-column>
<el-table-column v-for="item in info" v-bind:label="item.text" :prop="item.english" width="180"></el-table-column>
</el-table>
<!--分页-->
<!--<el-pagination background layout="prev, pager, next" :total="10" style="margin-top:100px;"></el-pagination>-->
<el-pagination align='center'
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[1,5,10,20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
</el-col>
</el-row>
</el-card>
</el-row>
</div>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
info: [
{ id: 0, text: '手机号',english:'mobile'},
{ id: 1, text: '发送的内容',english:'sendContent' },
{ id: 2, text: '通道返回的数据',english:'channelReturnData' },
{ id: 3, text: '条数',english:'count' },
{ id: 4, text: '状态',english:'status' },
{ id: 5, text: '创建时间',english:'createTime' }
],
tableData: [],
/*分页数据*/
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 5 // 每页的数据条数
},
created:function(){
this.getData();
},
methods:{
getData:function(){
var t = this;
$.ajax({
type: "POST",
url: '/SmsFlow/querySmsFlowInfoByUser',
data: {
'fSmsApiAccount':'javatom11',
'fApiType':1000,
},
dataType:'json',
success:function(res){
console.log(res.values);
for(var i=0;i<res.values.length;i++){
var obj = {};
obj.mobile = res.values[i].fMobile;
obj.sendContent = res.values[i].fContent;
obj.channelReturnData = res.values[i].fChannlReturnData;
obj.count = 1;
obj.status = res.values[i].fState;
obj.createTime = t.$options.methods.dateFormat(res.values[i].fCreatetime);
t.tableData.push(obj);
}
} ,
error:function(err){
console.log("未获取到数据!");
}
})
},
//日期转化
dateFormat:function(dateTime){
var dateNew = new Date(dateTime).toJSON();
var date = new Date(+new Date(dateNew)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')
return date;
},
//分页点击方法
handleSizeChange:function(val) {
this.currentPage = 1;
this.pageSize = val;
},
handleCurrentChange:function(val) {
this.currentPage = val;
}
},
mounted: function () {
},
})
</script>
</body>
</html>
数据格式(自己从接口请求到数据自己使用js拼装成想要的格式)：
tableData: [
{
mobile: "2016-05-02",
sendContent:'',
...
},
{...}
]
