学生列表页的实现
学生列表渲染 和api的封装
studentList.vue
1 打开element-ui
https://element.eleme.cn/#/zh-CN链接: link
带边框的表格的el-table -->template->div
<el-table
:data="tableData"
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>
取数据放入js里面
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
接口地址
地址:[https://www.showdoc.com.cn/jinducasey/8321036098744323]
密码:jinduVIP
登录的用户名和密码符合校验规则即可(用户名:admin,密码1qaz!QAZ)
api.js 方法的封装
export function students(params) {
return service({
method:'get',
url:'/students',
params
})
}
表格数据转换
studentList.vue 调用接口
import {students} from '@/api/api.js'
空数组
created(){
getData()
}
methods:{
this.getData(params){
students(params)
.then(res) =>{
console.log(res)
})
}
}
studentList.vue
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="name" label="姓名" algin="center">
</el-table-column>
<el-table-column prop="sex" label="性别" algin="center">
</el-table-column>
<el-table-column prop="age" label="年龄" algin="center">
</el-table-column>
<el-table-column prop="number" label="学号" algin="center">
</el-table-column>
<el-table-column prop="class" label="班级" algin="center">
</el-table-column>
<el-table-column prop="state" label="状态" algin="center">
</el-table-column>
<el-table-column prop="address" label="地址" algin="center">
</el-table-column>
<el-table-column prop="phone" label="联系方式" algin="center">
</el-table-column>
<el-table-column label="操作" algin="center">
<template>
<el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
</template>
</el-table-column>
</el-table>
export default {
data() {
return {
tableData: []
}
},
created() {
this.getData()
},
methods: {
getData(params) {
students(params)
.then((res) => {
console.log(res);
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 = "休学中");
}, )