table.js 表格数据转换封装
//作业列表获取表格数据方法封装
export function getTableData(root, url, params, arr) {
root.service.get(url, { params: params || {} })
.then(res => {
if (res.data.status === 200) {
root.tableData = res.data.data
root.total = res.data.total
root.tableData.map(item => {
arr.map(aItem => {
item[aItem] ? item[aItem + '_text'] = '是' : item[aItem + '_text'] = '否'
})
})
root.loading = false
}
})
.catch(err => {
throw err
})
}
workList.vue后端分页
<template>
<div>
<el-table class="workList"
:data="tableData"
v-loading = 'loading'
border
style="width: 100%">
<el-table-column prop="id" label="用户ID" align="center"></el-table-column>
<el-table-column prop="useId" label="所有班级" align="center"></el-table-column>
<el-table-column prop="title" label="作业名称" align="center"></el-table-column>
<el-table-column prop="completed_text" label="完成情况" align="center"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[5, 10, 15, 20]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
import {getTableData} from '@/utils/table'
const data = [{
'id': '1',
'useId': '2',
'title': '批量清理数据',
'completed': '否'
},
{
'id': '19',
'useId': '3',
'title': '批量清理激活',
'completed': '是'
},
{
'id': '10',
'useId': '2',
'title': '批量清理数据',
'completed': '否'
},
{
'id': '12',
'useId': '3',
'title': '批量清理激活',
'completed': '是'
},{
'id': '14',
'useId': '2',
'title': '批量清理数据',
'completed': '否'
},
{
'id': '13',
'useId': '4',
'title': '批量清理激活',
'completed': '是'
}]
export default {
data(){
return {
tableData: [],
total : 0,
page: 1,
size: 10,
loading: true,
}
},
created(){
this.tableData = data
this.loading = false
getTableData(this,'/works',{page:this.page,size:this.size},["completed"])
},
methods:{
handleSizeChange(val) {
this.size = val
this.page = 1
getTableData(this,'/works',{page:this.page,size:val},["completed"])
},
handleCurrentChange(val) {
this.page = val
getTableData(this,'/works',{page: val ,size:this.size},["completed"])
},
}
}
</script>
<style lang="scss" scoped>
.workList {
.el-pagination {
text-align: left;
margin-top: 20px;
}
}
</style>
分页组件pageing.vue
<template>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
:page-sizes="[5, 10, 15, 20]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total"
:url="url">
</el-pagination>
</template>
<script>
import { getTableData } from '@/utils/table'
export default {
props: {
"total": Number,
"url": String
},
data() {
return {
page: 1,
size: 10
}
},
created() {
getTableData(this.$parent, '/works', { page: this.page, size: this.size }, ["completed"])
},
methods: {
handleSizeChange(val) {
this.size = val
this.page = 1
getTableData(this.$parent, '/works', { page: this.page, size: val }, ["completed"])
},
handleCurrentChange(val) {
this.page = val
getTableData(this.$parent, '/works', { page: val, size: this.size }, ["completed"])
},
}
}
</script>
workMent.vue
<template>
<div>
<el-table class="workMent" :data="tableData" v-loading='loading' border style="width: 100%">
<el-table-column prop="id" label="用户ID" align="center"></el-table-column>
<el-table-column prop="useId" label="所有班级" align="center"></el-table-column>
<el-table-column prop="title" label="作业名称" align="center"></el-table-column>
<el-table-column prop="completed_text" label="完成情况" align="center"></el-table-column>
</el-table>
<Page :total="total" :url="url" />
</div>
</template>
<script>
import Page from '../common/pageing.vue'
export default {
components: {
Page,
},
data() {
return {
tableData: [{
'id': '1',
'useId': '2',
'title': '批量清理数据',
'completed': '否'
},
{
'id': '19',
'useId': '3',
'title': '批量清理激活',
'completed': '是'
},
{
'id': '10',
'useId': '2',
'title': '批量清理数据',
'completed': '否'
},
{
'id': '12',
'useId': '3',
'title': '批量清理激活',
'completed': '是'
}, {
'id': '14',
'useId': '2',
'title': '批量清理数据',
'completed': '否'
},
{
'id': '13',
'useId': '4',
'title': '批量清理激活',
'completed': '是'
}],
total: 0,
loading: true,
url: '/works'
}
}
}
</script>
<style lang="scss" scoped>
.workMent {
.el-pagination {
text-align: left;
margin-top: 20px;
}
}
</style>