创建member.js
在api文件夹下面定义一个member.js文件来axios异步请求数据
因为member.js只针对会员管理模块,所以采用默认引入 export default下面写方法,这样就不用了 向以前登录模块单个引入
import { login, getUserInfo } from "@/api/login";这样就是单个引入
// 引入request.js
import request from '@/utils/request'
// 用export default 是因为针对会员管理一个模块,所以这么做
export default {
// 获取会员数据
getlist() {
// 记得引入上面的request,记得引入
return request({
url: '/member/list2',
method: 'get'
})
}
}
修改index.vue文件
在view文件夹下面的member文件夹下面修改index.vue 文件
写入的接口文件如下
<!-- {
"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(true)"
}]
}-->
注意点:
1、prop="name"中prop后面的是承接接口文件中的字段名
2、type=“index” 这个表示序号生成
3、其中框架采用的是饿了么的UI
4、下面是饿了么UI中的编辑删除, 定义一个template 加入slot-scope="scope"可以拿到本行的数据,scope.row.id这个是拿到本行的Id
<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>
5、具体代码如下:
<template>
<div>
<!-- :data=绑定数据,
border 这个是表格边框-->
<el-table :data="list" height="380" border style="width: 100%">
<!-- <el-table-column prop="name" label="姓名" width="180"></el-table-column> -->
<el-table-column type="index" label="序号" width="60"></el-table-column>
<el-table-column prop="cardNum" label="会员卡号"></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 label="支付方式">
<template slot-scope="scope">
<!-- slot-scope="scope" 通过这个拿到本行的东西,并通过|传到后面的方法中-->
<span>{{scope.row.payType|payTypeFilter}}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="区域"></el-table-column>
<!-- 通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据,用法参考 demo。 -->
<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>
</div>
</template>
<script>
// 导入请求的api
import memberApI from "@/api/member";
// 通过过滤器实现
// 支付类型
const payTypeOption = [
{ type: "1", name: "现金" },
{ type: "2", name: "支付宝" },
{ type: "3", name: "微信" },
{ type: "4", name: "银行卡" }
];
export default {
data() {
return {
list: []
};
},
// 初始化获取
created() {
this.fetchaData();
},
components: {},
methods: {
fetchaData() {
console.log(444444);
memberApI.getlist().then(response => {
const req = response.data;
this.list = req.data;
console.log(JSON.stringify(req.data));
// return req.data;
});
},
handleEdit(id) {
alert(id);
},
handleDelete(id) {
alert(id);
}
},
// 自定义一个过滤器
filters: {
payTypeFilter(type) {
// find查找到一条
// payTypeOption.find(obj=>{
// // payTypeOption数组中的type值和传入的type的type值判断,
// // 如果满足条件就返回obj
// return obj.type===type
// })
//
// payTypeOption数组中的type值和传入的type的type值判断,
// 如果满足条件就返回obj
// 只有一个表达式的简写方法如下
const payobj = payTypeOption.find(obj => obj.type === type);
// 判断payobj的内容,payobj如果为空则返回为空,不为空返回obj数组中的name选项
return payobj ? payobj.name : null;
}
}
};
</script>
<style scoped>
</style>
6、重点记录下过滤的部分
在export default外面定义
const payTypeOption = [
{ type: "1", name: "现金" },
{ type: "2", name: "支付宝" },
{ type: "3", name: "微信" },
{ type: "4", name: "银行卡" }
];
自定义一个过滤器
1、find表示查找到一条
2、payTypeOption数组中的type值和传入的type的type值判断,如果满足条件就返回obj
3、两种方法的定义方式是一样的
方法一
payTypeOption.find(obj=>{
return obj.type===type
})
方法二,当只有一个表达式的时候可以这样的简写
payTypeOption.find(obj => obj.type === type);
4、判断payobj的内容,payobj如果为空则返回为空,不为空返回obj数组中的name选项
return payobj ? payobj.name : null;
5、过滤的代码如下
// 自定义一个过滤器
filters: {
payTypeFilter(type) {
const payobj = payTypeOption.find(obj => obj.type === type);
// 判断payobj的内容,payobj如果为空则返回为空,不为空返回obj数组中的name选项
return payobj ? payobj.name : null;
}
}
7div里面渲染,scope.row.payType拿到后台的简写数据1,2,3,4,通过 | 隔开,后面接入过滤的payTypeFilter方法传值,
<el-table-column label="支付方式">
<template slot-scope="scope">
<!-- slot-scope="scope" 通过这个拿到本行的东西,并通过|传到后面的方法中-->
<span>{{scope.row.payType|payTypeFilter}}</span>
</template>
</el-table-column>