// 删除单个用户 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(() => { }); }
接下来就进行到编辑和添加
由于删除和编辑需要加入表单
<!-- 创建用户 begin--> <el-dialog title="创建用户" v-model="dialogCreateVisible" :close-on-click-modal="false" :close-on-press-escape="false" @close="reset" > <el-form :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"> <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 :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"> <el-button @click="dialogUpdateVisible = false">取 消</el-button> <el-button type="primary" :loading="updateLoading" @click="updateUser">确 定</el-button> </div> </el-dialog>
因为有表单 所以我们需要加入表单验证
以及添加和编辑弹出的状态
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, }; },
下面就加入添加和编辑的函数