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
然后引入需要用到的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进行我们的操作
首先 我们先从读取数据开始
放入你的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 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
vue使用element-resize-detector监听元素宽度变化方式
这篇文章主要介绍了vue使用element-resize-detector监听元素宽度变化方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-12-12
最新评论