Vuejs实战项目五:数据列表
1、在EasyMock 中添加数据列表模拟接口
请求url:/suyuan/list
请求方式:get
描述:数据列表
mock.js配置:
例:
{ "code": 2000, //状态码 "flag": true, "message": "查询成功", "data|20": [{ "id|+1": 10, "cardNum": "@integer(10000)", //大于1000的正整数 "name": "@cname", "birthday": "@date", "phone|11": "@integer(0,9)", //11个数字0-9间的数字 "integral": "@integer(0,500)", "money": "@float(0, 1000, 1, 3)", //0-1000小数,1-3位小数位 "payType|1": ['1', '2', '3', '4'], //4选1 "address": "@county(ture)" }] }
2、创建api调用接口
在/src/api下创建member.js
import request from '@/utils/request' export default { // 获取会员列表数据 getList(){ return request({ url: '/member/list', method: 'get', }) } }
3、编辑对应的展示页面
<template> <!-- 数据列表 :data 绑定渲染的数据 border 表格边框 --> <el-table :data="list" height="600" border style="width: 100%"> <!-- type="index"获取索引值,labal显示标题,prop 数据字段名 --> <el-table-column type="index" label="序号"></el-table-column> <el-table-column prop="cardNum" label="会员卡号" width="180"></el-table-column> <el-table-column prop="name" label="会员姓名"></el-table-column> <el-table-column prop="birthday" label="会员生日"></el-table-column> <el-table-column prop="phone" label="手机号码"></el-table-column> <el-table-column prop="integral" label="可用积分"></el-table-column> <el-table-column prop="money" label="开卡金额"></el-table-column> <el-table-column prop="payType" label="支付类型"></el-table-column> <el-table-column prop="address" label="会员地址"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> </template> <script> // 导入api import memberApi from "@/api/member"; export default { data() { return { list: [] }; }, created() { // 初始化获取列表数据 this.fetchData(); }, methods: { fetchData() { memberApi.getList().then(response => { const resp = response.data; this.list = resp.data; console.log(resp); }); }, handleEdit(id){ console.log('编辑',id) }, handleDelete(id){ console.log('删除',id) }, } }; </script>