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>
Vuejs实战项目五:数据列表的更多相关文章
- Vuejs实战项目步骤一
1.使用vue初始化项目 vue create msm-demo #创建项目 npm run serve #部署 2.更改public文件夹下面的index文件,只留下 <div id=&quo ...
- Vuejs实战项目四:权限校验
路由跳转参考文档:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 在/src下创建permission.js进行权限 ...
- Vuejs实战项目三:退出系统功能实现
1.创建Mockjs接口 method:post url:/user/logout 描述:退出系统 response: { "code": 2000, //状态码 "fl ...
- Vuejs实战项目:登陆页面
1.在view文件夹下创建login文件夹,创建index.vue:代表登录的组件 配置router.js,导入登录组件 import Vue from "vue"; import ...
- .NET Core实战项目之CMS 第五章 入门篇-Dapper的快速入门看这篇就够了
写在前面 上篇文章我们讲了如在在实际项目开发中使用Git来进行代码的版本控制,当然介绍的都是比较常用的功能.今天我再带着大家一起熟悉下一个ORM框架Dapper,实例代码的演示编写完成后我会通过Git ...
- .NET Core实战项目之CMS 第十五章 各层联动工作实现增删改查业务
连着两天更新叙述性的文章大家可别以为我转行了!哈哈!今天就继续讲讲我们的.NET Core实战项目之CMS系统的教程吧!这个系列教程拖得太久了,所以今天我就以菜单部分的增删改查为例来讲述下我的项目分层 ...
- 再一波Python实战项目列表
前言: 近几年Python可谓是大热啊,很多人都纷纷投入Python的学习中,以前我们实验楼总结过多篇Python实战项目列表,不但有用还有趣,最主要的是咱们实验楼不但有详细的开发教程,更有在线开发环 ...
- iOS项目开发实战——学会使用TableView列表控件(四)plist读取与Section显示
文本将会实现把数据存储到plist文件里.然后在程序中进行读取.在TableView控件中依据不同的类别显示Section. 有关TableView 的其它实现,请參考<iOS项目开发实战--学 ...
- [ionic开源项目教程] - 第4讲 通Service层获取数据列表
第4讲:通Service层获取数据列表 上一讲中页面的基本架构已完成,这一讲介绍如何通过service层从服务器请求数据,在通过controller层为载体,显示到视图层. 1.在services.j ...
随机推荐
- SpringCloud学习笔记《---03 Ribbon---》基础篇
- python pip安装扩展报错
1.安装tldr报错 (1)报错详情: [root@linuxnode1 ~]# pip install tldrCollecting tldr Downloading https://files.p ...
- sqlite获取表字段
sqlite下能通过sqlite_master获取指定数据库的表信息和表结构 但是通过sqlite_master不能获取表字段的信息 如果需要获取指定表字段的所有信息 可以使用如下语法: PRAGMA ...
- 【案例】DIV随鼠标移动而移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js闭包与java内部类
在js中闭包用的比较广泛,主要解决变量作用域导致的问题.
- [JZOJ3167] 【GDOI2013模拟3】查税
题目 描述 题目大意 维护一个有一次函数组成的序列 具体来说,对于位置xxx,现在的值为sx+zx∗(T−tx)s_x+z_x*(T-t_x)sx+zx∗(T−tx) 有两个操作,修改某个位置上 ...
- Nginx 和 Gunicorn 部署 Django项目
目录 Nginx 和 Gunicorn 部署 Django项目 配置Nginx 安装配置Gunicorn 通过命令行直接启动 Gunicorn 与 uwsgi 的区别,用哪个好呢 Gunicorn u ...
- 《DSP using MATLAB》Problem 7.37
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- python学习笔记4.1_检测和过滤异常值
1.查看数据分布data.describe() 2.找出某列中符合筛选条件的值 3.找出符合筛选条件的行 4.用np.sign(data)*3设置绝对值的标准 data[np.abs(data)> ...
- Neo4j 第四篇:使用.NET驱动访问Neo4j
本文使用的IDE是Visual Studio 2015 ,驱动程序是Neo4j官方的最新版本:Neo4j.Driver,创建的类库工程(Project)要求安装 .NET Framework 4.5. ...