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:'/',
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 django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^update_user/$',views.update_user),
url(r'^get_user/$',views.get_user_list),
]
api_test/app01/views.py文件内容
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from .models import UserProfile
@csrf_exempt
def update_user(request):
request_dict = json.loads(request.body)
user_id = request_dict.get("user_id")
name = request_dict.get("name")
email = request_dict.get("email")
status = request_dict.get("status")
try:
UserProfile.objects.filter(id=int(user_id)).update(name=name, email=email, status=status)
return JsonResponse({"result": True})
except Exception as e:
return JsonResponse({"result": False})
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)
这里前端向后端发送POST请求时，后端没有执行csrftoken验证，前端获取csrftoken,后端进行csrftoken验证不在本文示例之内
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"
show-total
@on-change="getData"></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',
render: (h, {row, index}) => {
let edit;
let control;
if (this.editIndex === index) {
edit = [h('Input', {
props: {
value: row.name
},
on: {
input: (val) => {
this.editValue = val;
}
}
})];
control = [
h('Icon', {
style: {
cursor: 'pointer',
margin: '8px'
},
props: {
type: 'md-checkmark',
size: 16,
color: '#19be6b'
},
on: {
click: () => {
this.data[index].name = this.editValue;
this.editIndex = -1;
axios.post(`http://127.0.0.1:8000/update_user/`,{
user_id: row.id,
name: this.editValue,
email: row.email,
status: row.status
}).then(res => {
if(res.data.result) {
this.$Message.success('修改用户名成功');
} else {
this.$Message.error('请求失败');
}
})
}
}
}),
h('Icon', {
style: {
cursor: 'pointer',
margin: '8px'
},
props: {
type: 'md-close',
size: 16,
color: '#ed4014'
},
on: {
click: () => {
this.editIndex = -1;
}
}
})
]
} else {
edit = row.name;
control = [h('Icon', {
style: {
cursor: 'pointer'
},
props: {
type: 'ios-create-outline',
size: 16
},
on: {
click: () => {
this.editIndex = index;
this.editValue = row.name;
}
}
})]
}
return h('Row', [
h('Col', {
props: {
span: 16
}
}, edit),
h('Col', {
props: {
span: 6
}
}, control)
])
}
},
{
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,
total:0,
editIndex: -1,
editValue: '',
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，页面渲染如下
点击某一行用户名后面的修改按钮，用户名原有数据会成input框，让用户输入修改数据
当用户修改完成，点击保存，则会把修改后的用户名发送到后端接口，保存到数据库中
再次刷新浏览器，会看到用户名已经修改了
3.可编辑行
src/views/table2.vue文件内容
<template>
<div style="padding:32px 64px">
<h1>可编辑行</h1>
<Table :data="data" :columns="column" border></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 {
editIndex: -1,
editName: '',
editEmail: '',
editStatus: '',
statusArray: [
{
key: '1',
value: '1'
},
{
key: '2',
value: '2'
},
{
key: '3',
value: '3'
},
],
column: [
{
type:"index",
width:100,
align:'center',
title:'ID',
key:'id',
},
{
title: "用户名",
key: 'name',
render: (h, {row, index}) => {
let edit;
if (this.editIndex === index) {
this.editName = row.name
edit = [h('Input', {
props: {
value: row.name
},
on: {
input: (val) => {
this.editName = val;
}
}
})]
} else {
edit = row.name;
}
return h('div', [edit]);
}
},
{
title: "邮箱",
key: 'email',
render: (h, {row, index}) => {
let edit;
if (this.editIndex === index) {
this.editEmail = row.email
edit = [h('Input', {
props: {
value: row.email
},
on: {
input: (val) => {
this.editEmail = val;
}
}
})]
} else {
edit = row.email;
}
return h('div', [edit]);
}
},
{
title: "等级",
key: 'status',
render: (h, {row, index}) => {
let edit;
if (this.editIndex === index) {
this.editStatus = row.status
let options = this.statusArray.map(v => {
return h('Option',{
props: {
value: v.value
}
}, v.key)
})
edit = [h('Select', {
props: {
value: row.status
},
on: {
input: (val) => {
this.editStatus = val;
}
}
},options)]
} else {
edit = row.status;
}
return h('div', [edit]);
}
},
{
title: "操作",
render: (h, {row, index}) => {
if (this.editIndex === index) {
return [
h('Button', {
props: {
type: 'success'
},
on: {
click: () => {
this.data[index].name = this.editName;
this.data[index].email = this.editEmail;
this.data[index].status = this.editStatus;
this.editIndex = -1;
axios.post(`http://127.0.0.1:8000/update_user/`,{
user_id: row.id,
name: this.editName,
email: this.editEmail,
status: this.editStatus
}).then(res => {
if(res.data.result) {
this.$Message.success('修改用户名成功');
} else {
this.$Message.error('请求失败');
}
})
}
}
}, '保存'),
h('Button', {
props: {
type: 'error'
},
style: {
marginLeft: '6px'
},
on: {
click: () => {
this.editIndex = -1;
}
}
}, '取消')
]
} else {
return h('Button', {
on: {
click: () => {
this.editName = row.name;
this.editEmail = row.email;
this.editStatus = row.status;
this.editIndex = index;
}
}
}, '修改')
}
}
}
],
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/#/table2，页面渲染如下
点击某一行操作栏中的修改按钮，用户名和邮箱原有数据会成input框，input框中数据为原数据，等级原有数据处会变成select下拉框让用户选择
当用户修改完成，点击保存，则会把修改后的用户信息通过POST请求发送到后端接口，保存到数据库中
再次刷新浏览器，会看到用户名已经修改了
iView学习笔记(二)：Table行编辑操作的更多相关文章
- jquery学习笔记(二)：DOM元素操作
内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性 语法:attr(name) 参数name表示属性的名称 2.设置元素的属性 单个属性设置语法:attr(key,val ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- python学习笔记(二)---for循环与操作列表
内容概要 for循环 range(start,end,step)函数 生成随机数列表 list()函数 将range()的结果整合到某个列表 列表的操作 切片(start: end :step) 元组 ...
- iView学习笔记(三)：表格搜索，过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
- git的学习笔记(二):git远程操作
1.创建ssh key ssh-keygen -t rsa -C "your_email@example.com" 执行命令后会在用户的家目录生成.ssh的隐藏文件夹,文件夹里有公 ...
- X-Cart 学习笔记（四）常见操作
目录 X-Cart 学习笔记(一)了解和安装X-Cart X-Cart 学习笔记(二)X-Cart框架1 X-Cart 学习笔记(三)X-Cart框架2 X-Cart 学习笔记(四)常见操作 五.常见 ...
- Java IO学习笔记二
Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...
- 《SQL必知必会》学习笔记二)
<SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...
- Django学习笔记二
Django学习笔记二 模型类,字段,选项,查询,关联,聚合函数,管理器, 一 字段属性和选项 1.1 模型类属性命名限制 1)不能是python的保留关键字. 2)不允许使用连续的下划线,这是由dj ...
随机推荐
- Go：为何带来泛型
中文版 English version 介绍 [这是在Gophercon 2019上发表的演讲版本.视频链接可供使用.] 这篇文章是关于向Go添加泛型的意义,以及为什么我认为我们应该这样做.我还将介绍 ...
- kafka（四） 网络通讯
参考文章 http://www.jianshu.com/p/eab8f15880b5 kafka nio通信机制:http://ifeve.com/kafka-nio/ 通讯协议:tcp 网络模型:
- Django单元测试总结
title: Django单元测试总结 date: 2019/6/18 17:50:00 body: [article] description: " 在本文中,笔者大致对Django单元 ...
- 新博客 https://k8gege.org
新博客 https://k8gege.org 于2019/12/3启用,忘了发 由于博客园长期被Google误报屏蔽,导致Firefox/Chrome等浏览器无法访问博客 发现将被Google误报的文 ...
- vue-router学习笔记（一）
学习vue-router首先要认识的两个属性 $router 和 $route. $router指的是router实例,$route则是当前激活的路由信息对象,是只读属性,不可更改,但是可以watch ...
- .Net 如何使用Nlog
NLog是一个简单灵活的.NET日志记录类库,NLog的API非常类似于log4net,且配置方式非常简单.通过使用NLog,我们可以在任何一种.NET语言中输出带有上下文的调试信息,根据项目需求配置 ...
- Bagging 和RF的区别
跑训练无聊看了看别人的面经,发现自己一时半会答不上来,整理一下. 一.Bagging介绍 先看一个Bagging的一个概念图(图来自https://www.cnblogs.com/nickchen12 ...
- python turtle画花
turtle是一个功能强调大的绘图的库,可以用来绘制各种所需要的图案,但是在使用时需要计算好角度等一系列的问题. 代码(源自<Python语言程序设计>)如下: 运行结果:
- ASP.NET Core中如何显示[PII is hidden]的隐藏信息
有时候我们在ASP.NET Core项目运行时,发生在后台程序中的错误会将关键信息隐藏为[PII is hidden]这种占位符,如下所示: 而知道这些关键信息,有时候对我们调试程序是非常重要的.所以 ...
- Git 解决合并分支时的冲突
参考链接:https://www.liaoxuefeng.com/wiki/896043488029600/900004111093344 创建分支时,新分支的文件内容建立在原分支的基础上,我们称这时 ...