elementUI动态数据表格（带分页）index.vue
<template>
<div>
<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange"> <el-table-column type="selection" width="60"></el-table-column>
<el-table-column prop="eNumber" label="企业编号" width="180" sortable></el-table-column>
<el-table-column prop="eName" label="企业名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="eIndustry" label="所属⾏业" width="180"></el-table-column>
<el-table-column prop="eRange" label="经营范围" width="180"></el-table-column>
<el-table-column prop="eModel" label="经营模式" width="180"></el-table-column>
<el-table-column prop="createTime" label="创建⽇期" width="180"></el-table-column>
<el-table-column prop="updateTime" label="更新⽇期" width="180"></el-table-column>
<el-table-column prop="recordStatus" label="企业状态" width="180"></el-table-column>
</el-table>
<el-pagination background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 50, 100, 200]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
keyword: "集团",
total: 5,
currentPage: 1,
          pageSize: 10,
tableData: [{
eNumber: 'A10001',
eName: 'YE集团',
eIndustry: '⾦融业',
eRange: '商业',
elementui登录界面
eModel: '国有企业',
createTime: '2017-03-27',
updateTime: '2016-03-27',
recordStatus: '1'
}],
multipleSelection: []
}
},
created: function(){
// 组件创建完后获取数据，
// 此时 data 已经被 observed 了
this.fetchData();
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(function(row)  {
this.$leRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
callbackFunction(result) {
alert(result + "aaa");
},
fetchData(){ //获取数据
this.$http.jsonp("localhost:8080/wproject/view/enterprise!getListByParam.action",{//跨域请求数据
params: {
keywords:this.keyword//输⼊的关键词
},
jsonpCallback:'callbackFunction'//这⾥是callback
}).then(function(res) {//请求成功回调，请求来的数据赋给searchList数组
this.currentPage = res.body.curr;
this.tableData = res.body.data;
console.info(res);
},function(res) {//失败显⽰状态码
alert("res.status:"+res.status)
})
},
handleSizeChange(val){
this.pageSize = val;
this.currentPage = 1;
this.fetchData(1, val);
// console.log(`每页 ${val} 条`);
},
handleCurrentChange(val){
this.currentPage = val;
this.fetchData(val, this.pageSize);
// console.log(`当前页: ${val}`);
}
}
}
</script>
<style>
.el-table th {
text-align: center;
}
.
el-table tbody tr td:first-child {
text-align: center;
}
</style>
附上Java后台模拟数据接⼝代码：
/*jsonp调⽤接⼝⽅法*/
public void getListByParam() {
try {
System.out.println("调⽤getListByParam⽅法");
String callbackFunName = Parameter("callback");
String keywords = Parameter("keywords");
int curPage = Integer.Parameter("curr"));
int pageSize = Integer.Parameter("pageSize"));
List<Enterprise> enterList = enterpriseService.findAllByParam(keywords, curPage, pageSize);            SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
//创建JSONObject对象
JSONObject result = new JSONObject();
//创建JSONArray实例
JSONArray jsonArray = new JSONArray();
//for each循环取出每个User对象
for(int i=0; i<enterList.size(); i++) {
Enterprise etpr = (i);
//JSONObject是⼀个{}包裹起来的⼀个对象(Object)，
//JSONArray则是[]包裹起来的⼀个数组(Array)
//此处为对象，所以⽤得到JSONObject
JSONObject jo = new JSONObject();
jo.put("eId", Id());
jo.put("eNumber", EnterpriseNumber());
jo.put("eName", EnterpriseName());
EnterpriseIndustry().equals("1")){
jo.put("eIndustry", "⾦融业");
} else EnterpriseIndustry().equals("2")){
jo.put("eIndustry", "IT业");
} else EnterpriseIndustry().equals("3")){
jo.put("eIndustry", "⼯业");
} else EnterpriseIndustry().equals("4")){
jo.put("eIndustry", "农林牧渔业");
} else {
jo.put("eIndustry", "");
}
jo.put("eRange", EnterpriseRange());
jo.put("eModel", EnterpriseModel());
jo.put("createTime", formatter.CreateTime()));
jo.put("updateTime", formatter.UpdateTime()));
jo.put("recordStatus", RecordStatus());
jsonArray.add(jo);
}
result.put("code", "0");
result.put("msg", "");
result.put("count", enterList.size());
result.put("curr", curPage);
result.put("limit", pageSize);
result.put("data", jsonArray);
System.out.println("enterList.size(): " + enterList.size());
System.out.println("curPage: " + curPage);
System.out.println("pageSize: " + pageSize);
/
/设置字符集
response.setCharacterEncoding("UTF-8");
//页⾯输出
PrintWriter out = Writer();
out.write(callbackFunName + "(" + String() + ")");            out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。