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>