vue+element增删改查

新项目使用的是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('YYYYMMDDHH: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

这就是整个增删改查的过程 
demo地址:https://github.com/janessssss/vuejs-element

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值