新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element （http://element.eleme.io/#/zh-CN）来配合vue.js进行样式填充
之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js
下面就介绍一下vue.js应用在表格里的增删改查
首先引入一下element的js
<script src="/UploadFiles/2021-04-02/index.js">然后引入需要用到的vue相关的js文件
<script src="/UploadFiles/2021-04-02/vue.js">下面先说一下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"> <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进行我们的操作
vm = new Vue({ el: '#user', data:{}, methods:{} })首先 我们先从读取数据开始
放入你的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:{} })接下来我们添加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; }); }, }读取完数据之后 我们可以看见数据是按照每页十条显示 是上面我们默认设置的
下面进行删除操作 删除我设置的是单挑删除以及多条删除
因为删除需要选中 所以我们需要加入选中的变量
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也要加入选中的函数
tableSelectionChange(val) { console.log(val); this.selected = val; },// 删除单个用户 removeUser(user) { this.$confirm('此操作将永久删除用户 ' + user.username + ', 是否继续"{/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 + ' 个用户, 是否继续",") }) .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 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>因为有表单 所以我们需要加入表单验证
以及添加和编辑弹出的状态
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, }; },下面就加入添加和编辑的函数
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 + ', 是否继续"{/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 + ' 个用户, 是否继续",") }) .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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“vue.js+Element实现表格里的增删改查”评论...