https://element.faas.ele.me/#/zh-CN/component/table
将代码复制到相应文件下
pageOne.vue
<template>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="date"
label="日期"
width="150">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
prop="city"
label="市区"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="300">
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
handleClick(row) {
console.log(row);
}
},
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}]
}
}
}
</script>
<style scoped>
</style>
一、加载动态数据
vue
修改 <el-table-column
fixed
prop="date" #对应相应字段
label="日期"
width="150">
</el-table-column>
tableData: [{
date: '2016-05-02', #获取数据一一对应
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
分页处理
image.png
<el-pagination
background
layout="prev, pager, next"
page-size="6"
:total="1000">
</el-pagination>
#total属性 ：表示一共多少条
page-size属性:表示每页六条数据
绑定分页时间
<el-pagination
background
layout="prev, pager, next"
:total="1000"
@current-change="page">
</el-pagination>
<script>
export default {
methods: {
handleClick(row) {
console.log(row);
},
page(currentPage){
alert(currentPage);
}
},
</script>
@current-change="page" 绑定事件
安装axios
vue add axios
安装axios报错
image.png
解决方案
在main.js里边把axios实例挂载到Vue原型上
main.js
import Vue from 'vue'
import axios from "axios";
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
Vue.config.productionTip = false
Vue.prototype.$ajax = axios
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
调用时方法
在需要发送请求的地方使用"$ajax"
created(){
this.$ajax.get("http://localhost:8181/book/findAll/1/6").then(function (resp) {
console.log(resp);
});
},
前台获取数据
<template>
<div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="id"
label="编号"
width="150">
</el-table-column>
<el-table-column
prop="name"
label="书名"
width="120">
</el-table-column>
<el-table-column
prop="author"
label="作者"
width="120">
</el-table-column>
<el-table-column
prop="publish"
label="出版社"
width="120">
</el-table-column>
<el-table-column
prop="pages"
label="页数"
width="300">
</el-table-column>
<el-table-column
prop="price"
label="定价"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:total="total"
@current-change="page">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleClick(row) {
console.log(row);
},
page(currentPage){
alert(currentPage);
}
},
created(){
//处理this作用域问题
const _this = this
this.$ajax.get("http://localhost:8181/book/findAll/1/6").then(function (resp) {
//获取数据
_this.tableData = resp.data.content
_this.total = resp.data.totalElements //获取总页数
});
},
data() {
return {
total: null,
tableData: null
}
}
}
</script>
<style scoped>
</style>
处理分页
export default {
methods: {
handleClick(row) {
console.log(row);
},
page(currentPage){
//处理this作用域问题
const _this = this
this.$ajax.get("http://localhost:8181/book/findAll/"+currentPage+"/6").then(function (resp) {
_this.tableData = resp.data.content
_this.total = resp.data.totalElements
});
}
},
后台接口处理
@Autowired
private BookRepository bookRepository;
@GetMapping("findAll/{page}/{size}")
public Page<Book> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size){
//Pageable分页接口 org.springframework.data.domain.Pageable;
//PageRequest实现接口 of方法获取
Pageable pageable = PageRequest.of(page-1,size);
//findAll的重载
return bookRepository.findAll(pageable);
}
