vue.js+Element实现表格里的增删改查

 更新时间:2017年01月18日 14:17:13   作者:janessssss  
本篇文章主要介绍了vue.js+Element实现增删改查,具有一定的参考价值,有兴趣的可以了解一下。

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element (http://element.eleme.io/#/zh-CN)来配合vue.js进行样式填充

之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js

下面就介绍一下vue.js应用在表格里的增删改查

首先引入一下element的js

1
<script src="plugins/element-ui/index.js"></script>

然后引入需要用到的vue相关的js文件

1
2
3
4
<script src="plugins/vue/vue.js"></script>
<script src="plugins/vue/vue-resource.js"></script>
<script src="plugins/vue/vue-moment.min.js"></script>
<script src="js/jquery.min.js"></script>

下面先说一下html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<div id="user">
 <!-- 操作 -->
 <ul class="btn-edit fr">
 <li >
 <el-button type="primary" @click="dialogCreateVisible = true">添加用户</el-button>
 <el-button type="primary" icon="delete" :disabled="selected.length==0" @click="removeUsers()" >删除</el-button>
 <el-button type="primary" icon="edit" :disabled="selected.length==0" >停用</el-button>
 <el-button type="primary" icon="edit" :disabled="selected.length==0" >激活</el-button>
 </li>
 </ul>
 <!-- 用户列表-->
 <el-table :data="users"
 stripe
 v-loading="loading"
 element-loading-text="拼命加载中..."
 style="width: 100%"
 height="443"
 @sort-change="tableSortChange"
 @selection-change="tableSelectionChange">
 <el-table-column type="selection"
 width="60">
 </el-table-column>
 <el-table-column sortable="custom" prop="username"
 label="用户名"
 width="120">
 </el-table-column>
 <el-table-column prop="name"
 label="姓名"
 width="120">
 </el-table-column>
 <el-table-column prop="phone"
 label="手机"
 >
 </el-table-column>
 <el-table-column prop="email"
 label="邮箱">
 </el-table-column>
 <el-table-column prop="create_time" sortable="custom" inline-template
 label="注册日期"
 width="260">
 <div>{{ row.create_time | moment('YYYY年MM月DD日 HH:mm:ss')}}</div>
 </el-table-column>
 <el-table-column inline-template
 label="操作"
 width="250">
 <el-button type="primary" size="mini" @click="removeUser(row)">删除</el-button>
 <el-button type="primary" size="mini" @click="setCurrent(row)">编辑</el-button>
 </el-table-column>
 </el-table>
 <!--分页begin-->
 <el-pagination class="tc mg"
 :current-page="filter.page"
 :page-sizes="[10, 20, 50, 100]"
 :page-size="filter.per_page"
 layout="total, sizes, prev, pager, next, jumper"
 :total="total_rows"
 @size-change="pageSizeChange"
 @current-change="pageCurrentChange">
 </el-pagination>
 <!--分页end-->
</div>

这一段是element的表单以及编辑还有分页样式 可以直接复制进来 其中添加了一些click操作 后面需要用到,然后我们就开始引入js

了解过vuejs的应该知道这样的结构 data里面填写我们获取的数据 一些规则 定义一些变量

在methods进行我们的操作

1
2
3
4
5
vm = new Vue({
el: '#user',
data:{},
methods:{}
})

首先 我们先从读取数据开始

放入你的url

users是表格绑定的数组 也是存放从后台获取的数据

将需要显示的数据放在filter中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
vm = new Vue({
 el: '#user',
 // 数据模型
 data: function() {
 return {
 url: 'url',
 users: [],
 filter: {
 per_page: 10, // 页大小
 page: 1, // 当前页
 name:'',
 username:'',
 phone:'',
 is_active:'',
 sorts:''
 },
 total_rows: 0,
 loading: true,
 };
 },
 methods:{}
})

接下来我们添加methods

pageSizeChange() 以及 pageCurrentChange()是用于分页的函数

在query() 是用于搜索的项目

getUsers() 就是用于获取数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
methods: {
 pageSizeChange(val) {
 this.filter.per_page = val;
 this.getUsers();
 },
 pageCurrentChange(val) {
 this.filter.page = val;
 this.getUsers();
 },
 query(){
 this.filter.name='';
 this.filter.username='';
 this.filter.phone='';
 this.filter[this.select]=this.keywords;
 this.getUsers();
 },
 // 获取用户列表
 getUsers() {
 this.loading = true;
 
 var resource = this.$resource(this.url);
 resource.query(this.filter)
 .then((response) => {
 this.users = response.data.datas;
 this.total_rows = response.data.total_rows;
 this.loading = false;
 })
 .catch((response)=> {
 this.$message.error('错了哦,这是一条错误消息');
 this.loading = false;
 });
 
 },
 }

读取完数据之后 我们可以看见数据是按照每页十条显示 是上面我们默认设置的

下面进行删除操作 删除我设置的是单挑删除以及多条删除

因为删除需要选中 所以我们需要加入选中的变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
vm = new Vue({
 el: '#user',
 // 数据模型
 data: function() {
 
 return {
 url: 'http://172.10.0.201/api/v1/accounts',
 users: [
 ],
 filter: {
 per_page: 10, // 页大小
 page: 1, // 当前页
 name:'',
 username:'',
 phone:'',
 is_active:'',
 sorts:''
 },
 total_rows: 0,
 loading: true,
 selected: [], //已选择项
 };
 },

然后在methods也要加入选中的函数

1
2
3
4
tableSelectionChange(val) {
console.log(val);
this.selected = val;
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 删除单个用户
 
 removeUser(user) {
 this.$confirm('此操作将永久删除用户 ' + user.username + ', 是否继续?', '提示', { type: 'warning' })
 .then(() => { // 向请求服务端删除
 var resource = this.$resource(this.url + "{/id}");
 resource.delete({ id: user.id })
 .then((response) => {
 this.$message.success('成功删除了用户' + user.username + '!'); this.getUsers(); })
 .catch((response) => {
 this.$message.error('删除失败!');
 });
 }) .catch(() => {
 this.$message.info('已取消操作!');
 });
},
//删除多个用户
removeUsers() {
 this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', { type: 'warning' })
 .then(() => {
 console.log(this.selected);
 var ids = []; //提取选中项的id
 $.each(this.selected,(i, user)=> { ids.push(user.id); }); // 向请求服务端删除var resource = this.$resource(this.url);
 resource.remove({ids: ids.join(",")
 }) .then((response) => {
 .catch((response) => {
 this.$message.error('删除失败!');
 });
 })
 .catch(() => {
 });
}

接下来就进行到编辑和添加

由于删除和编辑需要加入表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!-- 创建用户 begin-->
 <el-dialog title="创建用户" v-model="dialogCreateVisible" :close-on-click-modal="false" :close-on-press-escape="false" @close="reset" >
 <el-form id="#create" :model="create" :rules="rules" ref="create" label-width="100px">
 <el-form-item label="用户名" prop="username">
 <el-input v-model="create.username"></el-input>
 </el-form-item>
 <el-form-item label="姓名" prop="name">
 <el-input v-model="create.name"></el-input>
 </el-form-item>
 <el-form-item label="密码" prop="password">
 <el-input v-model="create.password" type="password" auto-complete="off"></el-input>
 </el-form-item>
 <el-form-item label="确认密码" prop="checkpass">
 <el-input v-model="create.checkpass" type="password"></el-input>
 </el-form-item>
 <el-form-item label="电话" prop="phone">
 <el-input v-model="create.phone"></el-input>
 </el-form-item>
 <el-form-item label="邮箱" prop="email">
 <el-input v-model="create.email"></el-input>
 </el-form-item>
 <el-form-item label="是否启用">
 <el-switch on-text="" off-text="" v-model="create.is_active"></el-switch>
 </el-form-item>
 </el-form>
 <div slot="footer" class="dialog-footer">
 <el-button @click="dialogCreateVisible = false">取 消</el-button>
 <el-button type="primary" :loading="createLoading" @click="createUser">确 定</el-button>
 </div>
 </el-dialog>
 <!-- 修改用户 begin-->
 <el-dialog title="修改用户信息" v-model="dialogUpdateVisible" :close-on-click-modal="false" :close-on-press-escape="false">
 <el-form id="#update" :model="update" :rules="updateRules" ref="update" label-width="100px">
 <el-form-item label="姓名" prop="name">
 <el-input v-model="update.name"></el-input>
 </el-form-item>
 <el-form-item label="电话" prop="phone">
 <el-input v-model="update.phone"></el-input>
 </el-form-item>
 <el-form-item label="邮箱" prop="email">
 <el-input v-model="update.email"></el-input>
 </el-form-item>
 <el-form-item label="是否启用">
 <el-switch on-text="" off-text="" v-model="update.is_active"></el-switch>
 </el-form-item>
 </el-form>
 <div slot="footer" class="dialog-footer">
 <el-button @click="dialogUpdateVisible = false">取 消</el-button>
 <el-button type="primary" :loading="updateLoading" @click="updateUser">确 定</el-button>
 </div>
 </el-dialog>

因为有表单 所以我们需要加入表单验证

以及添加和编辑弹出的状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
vm = new Vue({
 el: '#user',
 // 数据模型
 data: function() {
 
 var validatePass = (rule, value, callback) => {
 if (value === '') {
 callback(new Error('请再次输入密码'));
 } else if (value !== this.create.password) {
 callback(new Error('两次输入密码不一致!'));
 } else {
 callback();
 }
 };
 
 return {
 url: 'http://172.10.0.201/api/v1/accounts',
 users: [
 ],
 create: {
 id: '',
 username: '',
 name: '',
 password: '',
 checkpass: '',
 phone: '',
 email: '',
 is_active: true
 },
 currentId:'',
 update:{
 name: '',
 phone: '',
 email: '',
 is_active: true
 },
 rules: {
 name: [
 { required: true, message: '请输入姓名', trigger: 'blur' },
 { min: 3, max: 15, message: '长度在 3 到 15 个字符'}
 ],
 username: [
 { required: true, message: '请输入用户名', trigger: 'blur' },
 { min: 3, max: 25, message: '长度在 3 到 25 个字符'},
 { pattern:/^[A-Za-z0-9]+$/, message: '用户名只能为字母和数字'}
 ],
 password: [
 { required: true, message: '请输入密码', trigger: 'blur' },
 { min: 6, max: 25, message: '长度在 6 到 25 个字符'}
 ],
 checkpass: [
 { required: true, message: '请再次输入密码', trigger: 'blur' },
 { validator: validatePass}
 ],
 email: [
 { type: 'email', message: '邮箱格式不正确'}
 ],
 phone:[
 { pattern:/^1[34578]\d{9}$/, message: '请输入中国国内的手机号码'}
 ]
 },
 updateRules: {
 name: [
 { required: true, message: '请输入姓名', trigger: 'blur' },
 { min: 3, max: 15, message: '长度在 3 到 15 个字符'}
 ],
 email: [
 { type: 'email', message: '邮箱格式不正确'}
 ],
 phone:[
 { pattern:/^1[34578]\d{9}$/, message: '请输入中国国内的手机号码'}
 ]
 },
 filter: {
 per_page: 10, // 页大小
 page: 1, // 当前页
 name:'',
 username:'',
 phone:'',
 is_active:'',
 sorts:''
 },
 total_rows: 0,
 loading: true,
 selected: [], //已选择项
 dialogCreateVisible: false, //创建对话框的显示状态
 dialogUpdateVisible: false, //编辑对话框的显示状态
 createLoading: false,
 updateLoading: false,
 };
 },

下面就加入添加和编辑的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
methods: {
 tableSelectionChange(val) {
 console.log(val);
 this.selected = val;
 },
 pageSizeChange(val) {
 console.log(`每页 ${val} 条`);
 this.filter.per_page = val;
 this.getUsers();
 },
 pageCurrentChange(val) {
 console.log(`当前页: ${val}`);
 this.filter.page = val;
 this.getUsers();
 },
 setCurrent(user){
 this.currentId=user.id;
 this.update.name=user.name;
 this.update.phone=user.phone;
 this.update.email=user.email;
 this.update.is_active=user.is_active;
 this.dialogUpdateVisible=true;
 },
 // 重置表单
 reset() {
 this.$refs.create.resetFields();
 },
 query(){
 this.filter.name='';
 this.filter.username='';
 this.filter.phone='';
 this.filter[this.select]=this.keywords;
 this.getUsers();
 },
 // 获取用户列表
 getUsers() {
 this.loading = true;
 
 var resource = this.$resource(this.url);
 resource.query(this.filter)
 .then((response) => {
 this.users = response.data.datas;
 this.total_rows = response.data.total_rows;
 this.loading = false;
 })
 .catch((response)=> {
 this.$message.error('错了哦,这是一条错误消息');
 this.loading = false;
 });
 
 },
 
 // 创建用户
 createUser() {
 // 主动校验
 this.$refs.create.validate((valid) => {
 if (valid) {
 this.create.id=getuuid();
 this.createLoading=true;
 var resource = this.$resource(this.url);
 resource.save(this.create)
 .then((response) => {
 this.$message.success('创建用户成功!');
 this.dialogCreateVisible=false;
 this.createLoading=false;
 this.reset();
 this.getUsers();
 })
 .catch((response) => {
 var data=response.data;
 if(data instanceof Array){
 this.$message.error(data[0]["message"]);
 }
 else if(data instanceof Object){
 this.$message.error(data["message"]);
 }
 this.createLoading=false;
 });
 }
 else {
 //this.$message.error('存在输入校验错误!');
 return false;
 }
 });
 
 },
 
 // 更新用户资料
 updateUser() {
 this.$refs.update.validate((valid) => {
 if (valid) {
 this.updateLoading=true;
 var actions = {
 update: {method: 'patch'}
 }
 var resource = this.$resource(this.url,{},actions);
 resource.update({"ids":this.currentId},this.update)
 .then((response) => {
 this.$message.success('修改用户资料成功!');
 this.dialogUpdateVisible=false;
 this.updateLoading=false;
 //this.reset();
 this.getUsers();
 })
 .catch((response) => {
 var data=response.data;
 console.log(data);
 if(data instanceof Array){
 this.$message.error(data[0]["message"]);
 }
 else if(data instanceof Object){
 this.$message.error(data["message"]);
 }
 this.updateLoading=false;
 });
 }
 else {
 //this.$message.error('存在输入校验错误!');
 return false;
 }
 });
 },
 
 // 删除单个用户
 removeUser(user) {
 this.$confirm('此操作将永久删除用户 ' + user.username + ', 是否继续?', '提示', { type: 'warning' })
 .then(() => {
 // 向请求服务端删除
 var resource = this.$resource(this.url + "{/id}");
 resource.delete({ id: user.id })
 .then((response) => {
 this.$message.success('成功删除了用户' + user.username + '!');
 this.getUsers();
 })
 .catch((response) => {
 this.$message.error('删除失败!');
 });
 })
 .catch(() => {
 this.$message.info('已取消操作!');
 });
 },
 
 //删除多个用户
 removeUsers() {
 this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', { type: 'warning' })
 .then(() => {
 console.log(this.selected);
 var ids = [];
 //提取选中项的id
 $.each(this.selected,(i, user)=> {
 ids.push(user.id);
 });
 // 向请求服务端删除
 var resource = this.$resource(this.url);
 resource.remove({ids: ids.join(",") })
 .then((response) => {
 this.$message.success('删除了' + this.selected.length + '个用户!');
 this.getUsers();
 })
 .catch((response) => {
 this.$message.error('删除失败!');
 });
 })
 .catch(() => {
 this.$Message('已取消操作!');
 });
 }
 }

这就是整个增删改查的过程

demo地址:http://xiazai.jb51.net/201701/yuanma/vuejs-element_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:http://blog.csdn.net/janessssss/article/details/53288073

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • VUE屏幕整体滚动(滑动或滚轮)原生方法举例

    VUE屏幕整体滚动(滑动或滚轮)原生方法举例

    为了实现全屏滚动效果,我们首先需要使用Vue.js框架搭建项目,这篇文章主要给大家介绍了关于VUE屏幕整体滚动(滑动或滚轮)原生方法的相关资料,需要的朋友可以参考下
    2024-01-01
  • vue router返回到指定的路由的场景分析

    vue router返回到指定的路由的场景分析

    这篇文章主要介绍了vue router返回到指定的路由的场景分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • vue使用element-resize-detector监听元素宽度变化方式

    vue使用element-resize-detector监听元素宽度变化方式

    这篇文章主要介绍了vue使用element-resize-detector监听元素宽度变化方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 一文带你了解Vue数组的变异方法

    一文带你了解Vue数组的变异方法

    Vue框架提供了一些便捷的数组变异方法,包括push、pop、shift、unshift、splice、sort和reverse等,Vue的数组变异方法可以自动触发DOM更新,本文就详细带大家了解一下Vue.js数组的变异方法
    2023-06-06
  • Vue和uniapp中该如何使用canvas详解

    Vue和uniapp中该如何使用canvas详解

    说起canvas是css3新增的标签,而饼状图又是canvas经典,我们公司现在正在用uni-app框架去研发APP,下面这篇文章主要给大家介绍了关于Vue和uniapp中该如何使用canvas的相关资料,需要的朋友可以参考下
    2022-10-10
  • 详解实现vue的数据响应式原理

    详解实现vue的数据响应式原理

    这篇文章主要介绍了详解实现vue的数据响应式原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 基于el-table实现行内增删改功能

    基于el-table实现行内增删改功能

    这篇文章主要介绍了基于el-table实现行内增删改功能,用过通过操作按钮点击删除或者编辑功能即可实现相应的效果,下面小编给大家分享实例代码感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • vue3 element-plus如何使用icon图标组件

    vue3 element-plus如何使用icon图标组件

    这篇文章主要介绍了vue3 element-plus如何使用icon图标组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 浅谈Vue使用Elementui修改默认的最快方法

    浅谈Vue使用Elementui修改默认的最快方法

    这篇文章主要介绍了浅谈Vue使用Elementui修改默认的最快方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-12-12
  • 在Vue3.x中实现类似React.lazy效果的方法详解

    在Vue3.x中实现类似React.lazy效果的方法详解

    React 的 React.lazy 功能为组件懒加载提供了原生支持,允许开发者将组件渲染推迟到实际需要时再进行,虽然 Vue3.x 没有一个直接对应的 lazy 函数,但我们可以通过动态导入和 defineAsyncComponent 方法来实现类似的效果,需要的朋友可以参考下
    2024-03-03

最新评论