iView学习笔记(一)：Table基本操作(包含前后端示例代码)

iView表格操作

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:'http://www.likecs.com/', 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> <h1>服务端分页及选择页面数据条数</h1> <Table :columns="columns" :data="data" :loading="loading" border size="small"> </Table> <div> <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(`: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：:8080/#/table1,渲染效果如下

分页组件中，在前端代码里自定义了可以选择每页显示多少条数据的渲染结果

前端的页码数改变或者每页显示的数据条数被改变都会重新向后端请求数据

4.服务端分页并排序及过滤