Vuejs实战项目五：数据列表

Posted 2020-11-16 小飞猪咯咯

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>