vue.js+Element实现表格里的增删改查


Posted in Javascript onJanuary 18, 2017

新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element (http://element.eleme.io/#/zh-CN)来配合vue.js进行样式填充

之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js

下面就介绍一下vue.js应用在表格里的增删改查

首先引入一下element的js

<script src="plugins/element-ui/index.js"></script>

然后引入需要用到的vue相关的js文件

<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文件

<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 + ', 是否继续?', '提示', { 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 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 + ', 是否继续?', '提示', { 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.3water.com/201701/yuanma/vuejs-element_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
JS中Array数组学习总结
Jan 18 #Javascript
原生javascript实现图片放大镜效果
Jan 18 #Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 #Javascript
原生js实现回复评论功能
Jan 18 #Javascript
js实现表格筛选功能
Jan 18 #Javascript
js放大镜放大购物图片效果
Jan 18 #Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 #Javascript
You might like
PHP安全技术之 实现php基本安全
2010/09/04 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
php之可变变量的实例详解
2017/09/12 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
Python编程之多态用法实例详解
2015/05/19 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
对python生成业务报表的实例详解
2019/02/03 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
上学迟到的检讨书
2014/01/11 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
客房部经理岗位职责
2015/02/02 职场文书
表扬信范文
2015/05/04 职场文书
贷款担保书范本
2015/09/22 职场文书
小学语文国培研修日志
2015/11/13 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA