Vue--element实现会员管理列表数据渲染和过滤器转换支付类型

前戏

前面我们已经调通了会员管理的接口，现在将接口返回的数据渲染到页面上，实现的结果如下图所示

会员管理列表数据渲染

在src/views/member/index.vue里写如下代码

<template>
    <div>
      <!-- 列表页面
      :data绑定渲染的数据，data 里我们定义的上list
      border 表格边框，表头最上面的那个边框
      height 表格高度
    -->
    <el-table :data="list" height="380" border style="width: 100%">
        <!-- type='index'获取索引值，从1开始，label显示的标题，prop接口返回数据的字段名，width列宽，不写就自动 -->
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="member_card" label="会员卡号" width="180"></el-table-column>
        <el-table-column prop="member_name" label="会员姓名"></el-table-column>
        <el-table-column prop="member_birthday" label="会员生日" width="100"></el-table-column>
        <el-table-column prop="phone_number" label="手机号码" width="120"></el-table-column>
        <el-table-column prop="card_money" label="可用积分"></el-table-column>
        <el-table-column prop="Available_integral" label="开卡余额"></el-table-column>
        <el-table-column prop="pay_type" label="支付类型"></el-table-column>
        <el-table-column prop="member_address" label="会员地址" width='180'></el-table-column>

        <!-- 操作开始，scope 可以获取行数据 ，scope.row.id 获取该行数据的 id值-->
        <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit( scope.row.id)">编辑</el-button>
          <!-- 根据后端返回该行的id进行编辑和删除 -->
          <el-button size="mini" type="danger" @click="handleDelete( scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
      <!-- 操作结束 -->

    </el-table>
      <!-- 列表页面结束 -->

    </div>
</template>

<script>
import memberApi from "@/api/member"

export default{
    data(){
        return {
            list: []  // 数据传给list
        }
    },

    created() {
        // 调接口请求数据，将调接口定义一个方法，在created里调用这个方法
        
        this.fetchData()
    },

    methods: {
        fetchData(){
            // 获取token
            const token = localStorage.getItem('zz-token')
            console.log(token)
            memberApi.getList(token).then( response=>{
                const res = response.data
                this.list = res.data  // 将返回数据的data赋值给list
                console.log(res)
            })

            
        },
        // 编辑
        handleEdit(id){
            console.log('编辑',id)
        },
        // 删除
        handleDelete(id){
            console.log('删除',id)
        }
        
    },
}
</script>

刷新页面，查看控制台是否报错，效果和上面的效果一样

过滤器实现支付类型的转换

上面实现了列表数据的渲染，但是有个问题，就是支付类型显示的是数字，我们要转换为对应的支付类型，可以通过 filters 选项来定义过滤器来实现转换，代码如下

<template>
    <div>
      <!-- 列表页面
      :data绑定渲染的数据，data 里我们定义的上list
      border 表格边框，表头最上面的那个边框
      height 表格高度
    -->
    <el-table :data="list" height="380" border style="width: 100%">
        <!-- type='index'获取索引值，从1开始，label显示的标题，prop接口返回数据的字段名，width列宽，不写就自动 -->
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="member_card" label="会员卡号" width="180"></el-table-column>
        <el-table-column prop="member_name" label="会员姓名"></el-table-column>
        <el-table-column prop="member_birthday" label="会员生日" width="100"></el-table-column>
        <el-table-column prop="phone_number" label="手机号码" width="120"></el-table-column>
        <el-table-column prop="card_money" label="可用积分"></el-table-column>
        <el-table-column prop="Available_integral" label="开卡余额"></el-table-column>

        <!-- 支付类型开始 -->
        <el-table-column prop="pay_type" label="支付类型">
            <template slot-scope="scope">
                <!-- 使用过滤器,scope.row.pay_type为接口返回的pay_type的值，后面的是作用在哪个过滤器上面，这里作用在 payTypeFilter 上面-->
                <span>{{scope.row.pay_type | payTypeFilter }}</span>
              </template>
        </el-table-column>
        <!-- 支付类型结束 -->

        <el-table-column prop="member_address" label="会员地址" width='180'></el-table-column>

        <!-- 操作开始，scope 可以获取行数据 ，scope.row.id 获取该行数据的 id值-->
        <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit( scope.row.id)">编辑</el-button>
          <!-- 根据后端返回该行的id进行编辑和删除 -->
          <el-button size="mini" type="danger" @click="handleDelete( scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
      <!-- 操作结束 -->

    </el-table>
      <!-- 列表页面结束 -->

    </div>
</template>

<script>
import memberApi from "@/api/member"
// 支付类型，不能写在data里面，会报错，定义好了在下面写个 filters 方法
// 然后在列表页面使用过滤器，接口返回的pay_type是数字，不是字符串
const payTypeOptions = [
  { pay_type: 1, name: "现金" },
  { pay_type: 2, name: "微信" },
  { pay_type: 3, name: "支付宝" },
  { pay_type: 4, name: "银行卡" }
];

export default{
    data(){
        return {
            list: []  // 数据传给list
        }
    },

    created() {
        // 调接口请求数据，将调接口定义一个方法，在created里调用这个方法
        
        this.fetchData()
    },

    methods: {
        fetchData(){
            // 获取token
            const token = localStorage.getItem('zz-token')
            console.log(token)
            memberApi.getList(token).then( response=>{
                const res = response.data
                this.list = res.data  // 将返回数据的data赋值给list
                console.log(res)
            })

            
        },
        // 编辑
        handleEdit(id){
            console.log('编辑',id)
        },
        // 删除
        handleDelete(id){
            console.log('删除',id)
        }
        
    },
    filters: {
    // 过滤器，转换支付类型，type为1，2，3，4
    payTypeFilter(pay_type) {
      const payObj = payTypeOptions.find(obj => {
          // obj 就是上面的一个对象，type和上面对象的type进行对比，在返回
        return obj.pay_type === pay_type;
      });
      // payObj 有值，返回 payObj.name
      return payObj ? payObj.name : null; // 没找到类型返回null，找到了返回payObj.name
    }
  }
}
</script>

在上面的代码里增加了如下代码而已

定义支付类型

定义过滤器

 使用过滤器