数据表格渲染
1、找
在页面添加table表格,从element-ui官网查找,包括数据一起复制过来,查看显示没有问题后,把tableData清空为空数组。
<template>
<div>
<el-table :data="tableData" height="auto" border style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
};
},
};
</script>
<style></style>
2、请求数据接口
根据接口,修改api.js文件:请求方法、地址、参数,并将接口暴露出来。
// 把对应的接口请求封装成api来调用
import service from '../service'
// import qs from 'qs'
// 登录接口
export function login(data) {
return service({
method: 'post',
url: '/login',
data
})
}
//列表查询接口
export function students(param){
return{
method: 'get',
url: '/students',
param
}
}
3、在渲染页面前发送请求
<template>
<div>
<el-table :data="tableData" height="auto" border style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
<script>
import { students } from '@/api/api.js'
export default {
data() {
return {
tableData: [],
};
},
created() {
this.getData()
},
methods: {
getData(params){
students(params)
.then((res) => {
console.log(res.data)
});
}
}
};
</script>
<style></style>
此时调试出现的问题:(只修改2处也是可以的)
api.js
// 把对应的接口请求封装成api来调用
import service from '../service'
// import qs from 'qs'
// 登录接口
export function login(data) {
return service({
method: 'post',
url: '/login',
data
})
}
//列表查询接口
export function students(param){
return service({
method: 'get',
url: '/students',
param
})
}
打印返回的数据结果:
修改页面表头,渲染返回的数据:
1、表头prop属性值一定要和返回来的数据的key相同,否则渲染不出来
eg:
2、样式修改(小技巧)
修改前:
修改后:滚动条消失
<template>
<div>
<el-table :data="tableData" height="auto" border style="width: 100%">
<el-table-column prop="id" label="序号" align="center"> </el-table-column>
<el-table-column prop="name" label="姓名" align="center"> </el-table-column>
<el-table-column prop="sex" label="性别" align="center"> </el-table-column>
<el-table-column prop="age" label="年龄" align="center"> </el-table-column>
<el-table-column prop="number" label="学号" align="center">
</el-table-column>
<el-table-column prop="class" label="班级" align="center"> </el-table-column>
<el-table-column prop="status" label="状态" align="center">
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
<el-table-column prop="phone" label="联系方式" align="center">
</el-table-column>
<el-table-column fixed="right" label="操作" align="center">
<template slot-scope="scope">
<el-button
@click="handleClick(scope.row)"
icon="el-icon-delete"
type="danger"
size="small"
circle
></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { students } from "@/api/api.js";
export default {
data() {
return {
tableData: [],
};
},
created() {
this.getData();
},
methods: {
getData(params) {
students(params).then((res) => {
console.log(res.data);
});
},
handleClick(row) {
console.log(row);
},
},
};
</script>
<style></style>
4、返回数据渲染到页面上
将数据进行传递,动态直接渲染。
但是这样写报错,如下:
render===》渲染的时候出了问题,返回去找。
分析返回的数据格式,打印:res.data :
而传递数据时:
tableData是一个对象数组,而res.data是一个大群的对象数据,里面还有status和message、data等。真正是tableData的数据是res.data.data
修改后:
<template>
<div>
<el-table :data="tableData" height="450" border style="width: 100%">
<el-table-column prop="id" label="序号" align="center"> </el-table-column>
<el-table-column prop="name" label="姓名" align="center"> </el-table-column>
<el-table-column prop="sex" label="性别" align="center"> </el-table-column>
<el-table-column prop="age" label="年龄" align="center"> </el-table-column>
<el-table-column prop="number" label="学号" align="center">
</el-table-column>
<el-table-column prop="class" label="班级" align="center"> </el-table-column>
<el-table-column prop="status" label="状态" align="center">
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
<el-table-column prop="phone" label="联系方式" align="center">
</el-table-column>
<el-table-column fixed="right" label="操作" align="center">
<template slot-scope="scope">
<el-button
@click="handleClick(scope.row)"
icon="el-icon-delete"
type="danger"
size="mini"
circle
></el-button>
<el-button type="primary" icon="el-icon-edit" size="mini" circle></el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { students } from "@/api/api.js";
export default {
data() {
return {
tableData: [],
};
},
created() {
this.getData();
},
methods: {
getData(params) {
students(params).then((res) => {
console.log(res.data);
if(res.data.status === 200){
this.tableData = res.data.data
}
});
},
handleClick(row) {
console.log(row);
},
},
};
</script>
<style></style>
效果:但是有些数据上显示的问题:性别应该是男或女,不是1或2
表格数据处理——数据转换
大部分系统开发文档里,定义的数据库里有些字段,是用是用数字代替某些意义的字符。
eg:性别:1代表男,2代表女;
图书管理系统的,书的状态码:1借出,2在馆内,3已损坏;
校园管理系统,学生的状态码:1已入校,2未入校,3休学中
以处理性别字段为代表的两种处理方式:
1、在数据传递前,先进行转换,直接修改数据对象的属性值(原数据发生了变化而不推荐)
2、在数据传递前,先新添加一个属性字段,修改新的属性字段,最后渲染的是新字段值
如果要进行新增修改和删除的操作,本来从后端传过来的是1和2,发送请求回去也应该是1和2,而且一般会遵循接口的高复用性,发送请求回去的一般也是数据对象,所以尽量不要修改原数据。
把状态码数据也进行转换一下后
<template>
<div>
<el-table :data="tableData" height="450" border style="width: 100%">
<el-table-column prop="id" label="序号" align="center"> </el-table-column>
<el-table-column prop="name" label="姓名" align="center"> </el-table-column>
<el-table-column prop="sex_text" label="性别" align="center"> </el-table-column>
<el-table-column prop="age" label="年龄" align="center"> </el-table-column>
<el-table-column prop="number" label="学号" align="center">
</el-table-column>
<el-table-column prop="class" label="班级" align="center"> </el-table-column>
<el-table-column prop="state_text" label="状态" align="center">
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
<el-table-column prop="phone" label="联系方式" align="center">
</el-table-column>
<el-table-column fixed="right" label="操作" align="center">
<template slot-scope="scope">
<el-button
@click="handleClick(scope.row)"
icon="el-icon-delete"
type="danger"
size="mini"
circle
></el-button>
<el-button type="primary" icon="el-icon-edit" size="mini" circle></el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { students } from "@/api/api.js";
export default {
data() {
return {
tableData: [],
};
},
created() {
this.getData();
},
methods: {
getData(params) {
students(params).then((res) => {
console.log(res.data);
if(res.data.status === 200){
this.tableData = res.data.data
this.tableData.forEach(item => {
item.sex === 1 ? item.sex_text = '男' : item.sex_text = '女'
item.state === '1' ? item.state_text = '已入校' : item.state === '2' ? item.state_text = '未入校' : item.state_text = '休学中'
})
}
});
},
handleClick(row) {
console.log(row);
},
},
};
</script>
<style></style>
前端分页功能实现
分页操作的数据实际就是一个数组,那对数据进行分割的方法有哪些?那不同方法操作的核心就是找规律:每一页显示的是第几条数据到第几条数据。
1、找
2、复制引入,修改后使用
① 总条数功能:
②分页规律公式:
前端使用slice方法:(当前页数-1)*每页条数 ,当前页数*每页条数
在渲染数据前先对数据进行切片(此时是分页数字显示正确,但实际的分页功能还未实现)
一:直接绑定:
二:使用计算属性:
<template> <div class="InfoList"> <!-- <el-table :data=" tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize) " height="450" border style="width: 100%" :default-sort="{ prop: 'number', order: 'Ascending' }"> --> <el-table :data="compData" height="450" border style="width: 100%" :default-sort="{ prop: 'number', order: 'Ascending' }" > <!-- <el-table-column prop="id" label="序号" align="center"></el-table-column> --> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="number" label="学号" align="center" sortable> </el-table-column> <el-table-column prop="name" label="姓名" align="center"> </el-table-column> <el-table-column prop="sex_text" label="性别" align="center"> </el-table-column> <el-table-column prop="age" label="年龄" align="center" sortable> </el-table-column> <el-table-column prop="class" label="班级" align="center"> </el-table-column> <el-table-column prop="state_text" label="状态" align="center"> </el-table-column> <el-table-column prop="address" label="地址" align="center"> </el-table-column> <el-table-column prop="phone" label="联系方式" align="center"> </el-table-column> <el-table-column fixed="right" label="操作" align="center"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" icon="el-icon-delete" type="danger" size="mini" circle ></el-button> <el-button type="primary" icon="el-icon-edit" size="mini" circle ></el-button> </template> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination> </div> </template> <script> import { students } from "@/api/api.js"; export default { data() { return { tableData: [], currentPage: 1, //当前页数 pageSize: 10, //每页显示条数 total: 0, }; }, created() { this.getData(); }, computed: { compData(){ return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize) } }, methods: { handleSizeChange(val) { this.pageSize = val; this.currentPage = 1; }, handleCurrentChange(val) { this.currentPage = val; }, getData(params) { students(params).then((res) => { console.log(res.data); if (res.data.status === 200) { this.total = res.data.total; this.tableData = res.data.data; this.tableData.forEach((item) => { item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女"); item.state === "1" ? (item.state_text = "已入校") : item.state === "2" ? (item.state_text = "未入校") : (item.state_text = "休学中"); }); } }); }, handleClick(row) { console.log(row); }, }, }; </script> <style lang="scss"> .InfoList { .el-pagination { text-align: left; margin-top: 20x; } } </style>
③ 改变每页条数功能(点击页码,正确跳转)
ps:这里设定当每条条数改变时,当前页码会回到第一页。
最后调整一下样式:左对齐,上边距
最后InfoList.vue代码:
<template>
<div class="InfoList">
<!-- <el-table :data="
tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
" height="450" border style="width: 100%" :default-sort="{ prop: 'number', order: 'Ascending' }"> -->
<el-table
:data="compData"
height="450"
border
style="width: 100%"
:default-sort="{ prop: 'number', order: 'Ascending' }"
>
<!-- <el-table-column prop="id" label="序号" align="center"></el-table-column> -->
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="number" label="学号" align="center" sortable>
</el-table-column>
<el-table-column prop="name" label="姓名" align="center">
</el-table-column>
<el-table-column prop="sex_text" label="性别" align="center">
</el-table-column>
<el-table-column prop="age" label="年龄" align="center" sortable>
</el-table-column>
<el-table-column prop="class" label="班级" align="center">
</el-table-column>
<el-table-column prop="state_text" label="状态" align="center">
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
<el-table-column prop="phone" label="联系方式" align="center">
</el-table-column>
<el-table-column fixed="right" label="操作" align="center">
<template slot-scope="scope">
<el-button
@click="handleClick(scope.row)"
icon="el-icon-delete"
type="danger"
size="mini"
circle
></el-button>
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
circle
></el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 30, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
import { students } from "@/api/api.js";
export default {
data() {
return {
tableData: [],
currentPage: 1, //当前页数
pageSize: 10, //每页显示条数
total: 0,
};
},
created() {
this.getData();
},
computed: {
compData(){
return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
}
},
methods: {
handleSizeChange(val) {
this.pageSize = val;
this.currentPage = 1;
},
handleCurrentChange(val) {
this.currentPage = val;
},
getData(params) {
students(params).then((res) => {
console.log(res.data);
if (res.data.status === 200) {
this.total = res.data.total;
this.tableData = res.data.data;
this.tableData.forEach((item) => {
item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
item.state === "1"
? (item.state_text = "已入校")
: item.state === "2"
? (item.state_text = "未入校")
: (item.state_text = "休学中");
});
}
});
},
handleClick(row) {
console.log(row);
},
},
};
</script>
<style lang="scss">
.InfoList {
.el-pagination {
text-align: left;
margin-top: 20x;
}
}
</style>