{

  "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)"

  }]

}

import request from '@/utils/request'

export default {

    // 获取会员列表数据

    getList(){

        return request({

            url: '/member/list',

            method: 'get',

        })

    }

}

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