Vue + ElementUI实现动态获取表格数据并分页
首先,引用必需的js和css文件,这里我已经下载到本地了,你们改成自己的地址就行。<!-- 引入样式 --><link rel="stylesheet" href="vue/css/index.css"><script src="vue/js/vue.js"&g
·
首先,引用必需的js和css文件,这里我已经下载到本地了,你们改成自己的地址就行。
<!-- 引入样式 -->
<link rel="stylesheet" href="vue/css/index.css">
<script src="vue/js/vue.js"></script>
<!-- 引入组件库 -->
<script src="vue/js/index.js"></script>
<!-- 发送请求获取表格数据 -->
<script src="vue/js/vue-resource.min.js"></script>
打开ElementUI的官网找到table,查看后发现table由上面部分的html代码和下面的js代码构成,
html代码负责展示数据,js负责提供数据和定义一些方法,只不过这里的js换成了vue实例,然
后表格的html代码也要放到对应的vue实例中。
<div id="app"></div>
引入表格的html代码:
<!-- 表格 -->
<!-- tableData是vue实例中返回的data中的对象,作为表格数据源 -->
<el-table :data="tableData" stripe style="width: 100%">
<!-- prop为tableData对象中的属性名 -->
<el-table-column v-if="false" align="center" label="id" prop="id">
</el-table-column>
<el-table-column align="center" label="列名1" prop="param1"></el-table-column>
<el-table-column align="center" label="列名2" prop="param2"></el-table-column>
<el-table-column align="center">
<template slot-scope="scope">
<!-- handleEdit和handleDelete两个函数需要在vue实例的method中定义 -->
<el-button icon="el-icon-edit" size="mini" type="primary"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button icon="el-icon-delete" size="mini" type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
接下来引入分页的html代码:
<!-- handleSizeChange同上面一样,
需要在method中定义:total后面的参数是通过请求获取到的vue实例的data -->
<div class="block" align="center">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="1" :page-sizes="[10, 20, 30, 40]" :page-size="10"
layout="total, sizes, prev, pager, next, jumper" :total="dataTotal">
</el-pagination>
</div>
js部分:
var tableData = [];
var currentPage = 1;
var pageSize = 10;
var dataTotal = 0;
var Main = {
data() {
//向后端发起请求获取表格数据和total用来展示和分页
this.$http.get('xxxx/getInfoByPage.do?currentPage=' + currentPage + '&pageSize='
+ pageSize).then(function(res){
var info = JSON.parse(res.bodyText);
//给定义的变量赋值
this.tableData = info.pageInfo;
});
this.$http.get('xxxxx/getDataTotal.do').then(function(res){
var mes = JSON.parse(res.bodyText);
this.dataTotal = userMes.total;
});
return {
//vue实例的data,提供给前端页面进行分页展示
tableData : tableData,
dataTotal : dataTotal,
formLabelWidth: '120px'
}
},
methods: {
handleDelete(index, row) {
this.$confirm('你确定要删除该条数据吗', '提示').then(() => {
this.$http.post('xxxxx/delData.do?delId=' + row.id).then(function(res){
<!-- 请求成功后的函数体 -->
});
});
},
handleSizeChange(val) {
pageSize = val;
this.$http.get('xxxxx/xxxx.do?currentPage=' + currentPage + '&pageSize=' + pageSize).then(function(res){
<!-- 省略 -->
});
},
handleCurrentChange(val) {
<!-- 省略 -->
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
建议仔细阅读ElementUI官网相应说明,有什么不对的或者需要改进的地方,敬请指正
更多推荐
已为社区贡献1条内容
所有评论(0)