Vue数据渲染，和过滤器数据筛选

创建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>