iView学习笔记(一)：Table基本操作(包含前后端示例代码)
1.前端准备工作
首先新建一个项目，然后引入iView插件，配置好router
npm安装iView
npm install iview --save
cnpm install iview --save
src/main.js文件内容
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
src/router.js文件内容
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/table1',
component: () => import('./views/table1.vue')
},
{
path: '/table2',
component: () => import('./views/table2.vue')
},
{
path: '/table3',
component: () => import('./views/table3.vue')
},
{
path:'/',
redirect:'/table1'
}
]
})
2.后端准备工作
环境说明
python版本：3.6.6
Django版本：1.11.8
数据库：MariaDB 5.5.60
新建Django项目，在项目中新建app，配置好数据库
api_test/app01/models.py文件内容
from django.db import models
class UserProfile(models.Model):
name = models.CharField("用户名", max_length=32)
email = models.EmailField(max_length=32)
status = models.IntegerField(default=1)
def to_dic(self):
return dict([(attr, getattr(self, attr)) for attr in [f.name for f in self._meta.fields]])
api_test/urls.py文件内容
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^get_user/$',views.get_user_list),
]
api_test/app01/views.py文件内容
from django.http import JsonResponse
from .models import UserProfile
def get_user_list(request):
# for i in range(1, 1001): // 向数据库创建1000条记录
# name = "user" + str(i)
# email = "user%s@qq.com" % str(i)
# status = random.randint(1, 3)
# user_obj = UserProfile(name=name, email=email, status=status)
# user_obj.save()
current = request.GET.get("current", 1)
size = request.GET.get("size", 0)
sortType = request.GET.get("sortType")
filterType = request.GET.get("filterType")
res_list = []
try:
user_list = UserProfile.objects.all()
if filterType and filterType != "undefined":
user_list = user_list.filter(status=int(filterType))
total = user_list.count()
if current and size:
end = int(current) * int(size)
start = (int(current) - 1) * int(size)
user_list = user_list[start:end]
except Exception as e:
print(e)
return JsonResponse({"result": False}, safe=False)
for user in user_list:
res_list.append(user.to_dic())
if sortType == "desc":
res_list = sorted(res_list, key=lambda x: x["id"], reverse=True)
else:
res_list = sorted(res_list, key=lambda x: x["id"], reverse=False)
res = {
"data": {
"list": res_list,
"total": total
},
"result": True
}
return JsonResponse(res, safe=False)
3.服务端分页
src/views/table1.vue文件内容
<template>
<div style="padding:32px 64px">
<h1>服务端分页及选择页面数据条数</h1>
<Table
:columns="columns"
:data="data"
:loading="loading"
border
size="small">
</Table>
<div style="text-align:center;margin:16px 0">
<Page
:total="total"
:current.sync="current"
:page-size-opts="page_size_array"
show-sizer
show-total
@on-change="getData"
@on-page-size-change="handleChangeSize"></Page>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
columns:[
{
type:"index",
width:100,
align:'center',
title:'ID',
key:'id',
},
{
title:'姓名',
key:'name',
},
{
title:'状态',
key:'status',
render: (h, {row}) => {
if (row.status === 1) {
return h('Tag', {
props: {
color: 'green'
}
}, "等级 1")
} else if (row.status === 2) {
return h('Tag', {
props: {
color: 'red'
}
}, "等级 2")
} else if (row.status === 3) {
return h('Tag', {
props: {
color: 'blue'
}
}, "等级 3")
}
},
},
{
title:'邮箱',
key:'email',
}
],
data:[],
loading:false,
page_size_array: [10, 20, 30, 40, 60, 100], // 设置每页可以切换的条数
total:0,
current:1, // 当前页面
size:10, // 设置初始每页可以显示的数据条数
}
},
methods:{
getData (){
if (this.loading) return;
this.loading = true;
axios.get(`http://127.0.0.1:8000/get_user/?current=${this.current}&size=${this.size}`).then(res => {
if(res.data.result) {
this.data = res.data.data.list;
this.total = res.data.data.total;
this.loading = false
} else {
this.$Message.error('请求失败');
}
})
},
handleChangeSize (val){
this.size = val;
this.$nextTick(() => {
this.getData();
})
}
},
mounted () {
this.getData();
}
}
</script>
分别运行前后端项目，浏览器打开URL：http://localhost:8080/#/table1,渲染效果如下
分页组件中，在前端代码里自定义了可以选择每页显示多少条数据的渲染结果
前端的页码数改变或者每页显示的数据条数被改变都会重新向后端请求数据
4.服务端分页并排序及过滤
后端代码不变，src/views/table2.vue文件内容
<template>
<div style="padding:32px 64px">
<h1>服务端分页并排序，过滤</h1>
<Table
:columns="column"
:data="data"
:loading="loading"
border
@on-sort-change="handleSortChange"
@on-filter-change="handleFilterChange"
size="small"></Table>
<div style="text-align:center;margin:16px 0">
<Page :total="total" show-sizer :current.sync="current" @on-change="getData" @on-page-size-change="handleChangeSize"></Page>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
total: 0,
current: 1,
size:10,
loading: false,
sortType: 'normal', // normal || asc || desc
filterType: undefined, // undefined,1,2
column: [
{
title: "ID",
key: 'id',
sortable: 'custom'
},
{
title: "用户名",
key: 'name'
},
{
title: "邮箱",
key: 'email'
},
{
title: "等级",
key: 'status',
render: (h, {row}) => {
if (row.status === 1) {
return h('Tag', {
props: {
color: 'green'
}
}, "等级 1")
} else if (row.status === 2) {
return h('Tag', {
props: {
color: 'red'
}
}, "等级 2")
} else if (row.status === 3) {
return h('Tag', {
props: {
color: 'blue'
}
}, "等级 3")
}
},
filters: [
{
label: '级别 1',
value: 1
},
{
label: '级别 2',
value: 2
},
{
label: '级别 3',
value: 3
},
],
filterMultiple: false,
filterRemote(value) {
console.log(value);
this.filterType = value[0];
}
}
],
data: []
}
},
methods: {
handleSortChange({columns, key, order}) {
this.sortType = order;
this.current = 1;
this.getData();
},
handleFilterChange() {
this.current = 1;
this.getData();
},
handleChangeSize (val){
this.size = val;
this.$nextTick(() => {
this.getData();
})
},
getData() {
if (this.loading) return;
this.loading = true;
axios.get(`http://127.0.0.1:8000/get_user/?current=${this.current}&size=${this.size}&sortType=${this.sortType}&filterType=${this.filterType}`).then(res => {
if(res.data.result) {
this.data = res.data.data.list;
this.total = res.data.data.total;
this.loading = false;
} else {
this.$Message.error('请求失败');
}
})
}
},
mounted() {
this.getData();
}
}
</script>
浏览器打开URL：http://localhost:8080/#/table2,渲染效果如下
在前端对用户ID进行倒序排序
在前端对用户状态进行过滤
在前端对用户进行过滤后再对用户ID进行倒序排序
在前端页面进行的每一个分页或过滤操作，都会重新向后端请求数据
5.前端分页并排序及过滤
src/views/table3.vue文件内容
<template>
<div style="padding:32px 64px">
<h1>前端分页并排序，过滤</h1>
<Table
:data="dataWithPage"
:columns="column"
:loading="loading"
border
@on-sort-change="handleSortChange"
@on-filter-change="handleFilterChange"
size="small"></Table>
<div style="text-align:center;margin:16px 0">
<Page :total="limitData.length" :current.sync="current"></Page>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
total: 0,
current: 1,
loading: false,
sortType: 'normal', // normal || asc || desc
filterType: undefined, // undefined,1,2
column: [
{
title: "号码",
key: 'id',
sortable: 'custom'
},
{
title: "用户名",
key: 'name',
},
{
title: "邮箱",
key: 'email',
},
{
title: "等级",
key: 'status',
render: (h, {row}) => {
if (row.status === 1) {
return h('Tag', {
props: {
color: 'green'
}
}, "等级 1")
} else if (row.status === 2) {
return h('Tag', {
props: {
color: 'red'
}
}, "等级 2")
} else if (row.status === 3) {
return h('Tag', {
props: {
color: 'blue'
}
}, "等级 3")
}
},
filters: [
{
label: '级别 1',
value: 1
},
{
label: '级别 2',
value: 2
},
{
label: '级别 3',
value: 3
},
],
filterMultiple: false,
filterMethod(value, row) {
if (value === 1) {
return row.status === 1;
} else if (value === 2) {
return row.status === 2;
} else if (value === 3) {
return row.status === 3;
}
},
filterRemote(value) {
this.filterType = value[0];
}
}
],
data: []
};
},
computed: {
limitData() {
let data = [...this.data];
if (this.sortType === 'asc') {
data = data.sort((a, b) => {
return a.number > b.number ? 1 : -1;
})
}
if (this.sortType === 'desc') {
data = data.sort((a, b) => {
return a.number < b.number ? 1 : -1;
})
}
if (this.filterType === 1) {
data = data.filter(item => {
return item.status === 1;
})
} else if (this.filterType === 2) {
data = data.filter(item => {
return item.status === 2;
})
} else if (this.filterType === 3) {
data = data.filter(item => {
return item.status === 3;
})
}
return data;
},
dataWithPage () {
const data = this.limitData;
const start = this.current * 10 - 10;
const end = start + 10;
return [...data].slice(start,end);
}
},
methods: {
getData() {
if (this.loading) return;
this.loading = true;
axios.get(`http://127.0.0.1:8000/get_user/`).then(res => {
if(res.data.result) {
this.data = res.data.data.list;
this.total = res.data.data.total;
this.loading = false;
} else {
this.$Message.error('请求失败');
}
})
},
handleSortChange({columns, key, order}) {
this.sortType = order;
this.current = 1;
},
handleFilterChange() {
this.current = 1;
this.getData();
},
},
mounted() {
this.getData();
}
}
</script>
浏览器打开URL：http://localhost:8080/#/table3，渲染效果如下
进行分页，选择下一页
在前端页面进行用户状态过滤
在前端进行分页和排序时，不会向后端请求数据，只有当在前端进行过滤时，才会重新向后端请求数据
iView学习笔记(一)：Table基本操作(包含前后端示例代码)的更多相关文章
- iView学习笔记(三)：表格搜索，过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
- react学习笔记（1）：从前后端分离到项目部署
我来到现在这家公司有一年多的时间,一直做的是财政系统相关的产品,前端的技术栈用的是传统的jQuery+bootStrap+requireJs,随着项目的开发,越来越多的弊病凸显出来. 首先是前后端的代 ...
- iView学习笔记(二)：Table行编辑操作
1.前端准备工作 首先新建一个项目,然后引入iView插件,配置好router npm安装iView npm install iview --save cnpm install iview --sav ...
- tensorflow学习笔记(1)-基本语法和前向传播
tensorflow学习笔记(1) (1)tf中的图 图中就是一个计算图,一个计算过程. 图中的constant是个常量 计 ...
- iView学习笔记(四)：Form表单操作
1.后端准备 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django项目,在项目中新建app,配置好数据库 2.后端代码(基于C ...
- Spring Boot +Vue 项目实战笔记（二）：前后端结合测试（登录页面开发）
前言:关于开发环境 每位 Coder 都有自己偏好的开发工具,从大的方面划分主要有文本编辑器流和 IDE 流两种,我有一段时间也喜欢用编辑器(Sublime Text.Vim),但对我来说开发效率确实 ...
- 使用CEfSharp之旅 前后端访问代码
1.引入CEfSharp newget包 2.把平台配置为X86或X64,any cpu不支持此控件 3.引入命名空间 using CefSharp; using CefSharp.WinForms; ...
- Python学习笔记020——数据库基本操作
本数据库的操作是Linux虚拟机平台下进行的 1 启动和链接MySQL服务 1.1 服务端 (1)查看服务状态 sudo /etc/init.d/mysql stauts (2)启动服务端 sudo ...
- oracle学习笔记系列------oracle 基本操作之表的增删改查
--创建一个表 CREATE TABLE employee_souvc( id ), name ), gender ), birth DATE, salary ,), job ), deptno ) ...
随机推荐
- MySQL8.0 DDL原子性特性
1. DDL原子性概述 8.0之前并没有统一的数据字典dd,server层和引擎层各有一套元数据,sever层的元数据包括(.frm,.opt,.par,.trg等),用于存储表定义,分区表定义,触发 ...
- 前后端开发（2）：浏览器与PHP程序的交互
上一节介绍怎么在mac电脑上启用PHP程序,并且演示了一个简单的例子,这个例子运行时,涉及了浏览器.apache以及PHP程序的交互,这三者的关系大概是这样的: 一般来说,浏览器(或者类似功能的程序) ...
- yii框架widget和注册asset的例子
yii框架是一个基于组件的框架,这样代码的重用性就非常的高,如我们想在网站的多个地方调用编辑器,这样我们就可以自定义一个组件,来供我们调用使用 下面以Ueditor组件为例: 1.下载ueditor到 ...
- 16 | 脑洞大开：GUI测试还能这么玩（Page Code Gen + Data Gen + Headless）？
- Nagios安装配置教程（一）基本了解
一.Nagios简介 Nagios是一款开源的电脑系统和网络监视工具,能有效监控Windows.Linux和Unix的主机状态, 交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信 ...
- Sublime Text 3 安装 BracketHighlighter
1 概述 由于最近在Sublime Text 3安装 BracketHighlighter遇到不少问题,其中踩了不少坑,因此总结下来,形成博客,希望能帮助更多的人 2 电脑环境 windows 10 ...
- Python中文件的读写操作
文件操作基本流程: 1. 介绍 计算机系统是由计算机硬件,操作系统,和应用程序三部分组成. 内存 存放不持久 硬盘 可以使数据持久化 文件操作 数据持久化的一种 全栈开发 框架类 2. 文件的操作 ...
- WebSocket+Netty构建web聊天程序
WebSocket 传统的浏览器和服务器之间的交互模式是基于请求/响应的模式,虽然可以使用js发送定时任务让浏览器在服务器中拉取但是弊端很明显,首先就是不等避免的延迟,其次就是频繁的请求,让服务器的压 ...
- 2019 Java 全栈工程师进阶路线图，一定要收藏
技术更新日新月异,对于初入职场的同学来说,经常会困惑该往那个方向发展,这一点松哥是深有体会的. 我刚开始学习 Java 那会,最大的问题就是不知道该学什么,以及学习的顺序,我相信这也是很多初学者经常面 ...
- Atlassian In Action-Jira之核心配置（二）
道生一,一生二,二生三,三生万物. --<道德经> 如果说第一节的指导思想是管理之"道",那我们本节的核心配置就是Jira系统之"道"了.有了核心配 ...