Vuejs實戰項目五：數據列表

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>