vue+element增删改查

最新推荐文章于 2024-09-16 22:40:06 发布

前端小骚哥

最新推荐文章于 2024-09-16 22:40:06 发布

阅读量1w

点赞数 4

分类专栏：前端文章标签：前端

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element （http://element.eleme.io/#/zh-CN）来配合vue.js进行样式填充
之前用过angularjs 用到后来发现越来越难学于是就决定用vue.js
下面就介绍一下vue.js应用在表格里的增删改查
首先安装相关js以及css

import 'element-ui/lib/theme-default/index.css'

import Vue from 'vue'
import $ from 'jquery'
import vueResource from 'vue-resource'
import ElementUI from 'element-ui'

window.$ = $;
Vue.use(ElementUI);
Vue.use(vueResource);
 
 1
2
3
4
5
6
7
8
9
10

下面先说一下html文件

<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">
            <span>
                <el-button type="primary" size="mini" @click="removeUser(row)">删除</el-button>
                <el-button type="primary" size="mini" @click="setCurrent(row)">编辑</el-button>
            </span>
        </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>
 
 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

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

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

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

首先我们先从读取数据开始
放入你的url
users是表格绑定的数组也是存放从后台获取的数据
将需要显示的数据放在filter中

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:{}
})
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

接下来我们添加methods
pageSizeChange() 以及 pageCurrentChange()是用于分页的函数
在query() 是用于搜索的项目
getUsers() 就是用于获取数据

 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
24
25
26
27
28
29
30
31
32
33
34

读取完数据之后我们可以看见数据是按照每页十条显示是上面我们默认设置的
下面进行删除操作删除我设置的是单条删除以及多条删除
因为删除需要选中所以我们需要加入选中的变量

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: [], //已选择项
        };
    },
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

    tableSelectionChange(val) {
            console.log(val);
            this.selected = val;
        },
 
 1
2
3
4

// 删除单个用户

 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

接下来就进行到编辑和添加
由于删除和编辑需要加入表单

<!-- 创建用户 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

因为有表单所以我们需要加入表单验证
以及添加和编辑弹出的状态

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

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

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('已取消操作!');
                });
        }
    }
 
 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