学生列表页的实现

学生列表页的实现

学生列表渲染 和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 = "休学中");
                        }, )