vue.js+Element实现表格里的增删改查
新项目使用的是vue.js后来发现饿了吗前端编写的一套框架Element（http://element.eleme.io/#/zh-CN）来配合vue.js进行样式填充
之前用过angularjs用到后来发现越来越难学于是就决定用vue.js
下面就介绍一下vue.js应用在表格里的增删改查
首先引入一下element的js
<scriptsrc="plugins/element-ui/index.js"></script>
然后引入需要用到的vue相关的js文件
<scriptsrc="plugins/vue/vue.js"></script> <scriptsrc="plugins/vue/vue-resource.js"></script> <scriptsrc="plugins/vue/vue-moment.min.js"></script> <scriptsrc="js/jquery.min.js"></script>
下面先说一下html文件
<divid="user">
<!--操作-->
<ulclass="btn-editfr">
<li>
<el-buttontype="primary"@click="dialogCreateVisible=true">添加用户</el-button>
<el-buttontype="primary"icon="delete":disabled="selected.length==0"@click="removeUsers()">删除</el-button>
<el-buttontype="primary"icon="edit":disabled="selected.length==0">停用</el-button>
<el-buttontype="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-columntype="selection"
width="60">
</el-table-column>
<el-table-columnsortable="custom"prop="username"
label="用户名"
width="120">
</el-table-column>
<el-table-columnprop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-columnprop="phone"
label="手机"
>
</el-table-column>
<el-table-columnprop="email"
label="邮箱">
</el-table-column>
<el-table-columnprop="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-columninline-template
label="操作"
width="250">
<el-buttontype="primary"size="mini"@click="removeUser(row)">删除</el-button>
<el-buttontype="primary"size="mini"@click="setCurrent(row)">编辑</el-button>
</el-table-column>
</el-table>
<!--分页begin-->
<el-paginationclass="tcmg"
: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=newVue({
el:'#user',
data:{},
methods:{}
})
首先我们先从读取数据开始
放入你的url
users是表格绑定的数组也是存放从后台获取的数据
将需要显示的数据放在filter中
vm=newVue({
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;
varresource=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=newVue({
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(()=>{//向请求服务端删除
varresource=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);
varids=[];//提取选中项的id
$.each(this.selected,(i,user)=>{ids.push(user.id);});//向请求服务端删除varresource=this.$resource(this.url);
resource.remove({ids:ids.join(",")
}).then((response)=>{
.catch((response)=>{
this.$message.error('删除失败!');
});
})
.catch(()=>{
});
}
接下来就进行到编辑和添加
由于删除和编辑需要加入表单
<!--创建用户begin--> <el-dialogtitle="创建用户"v-model="dialogCreateVisible":close-on-click-modal="false":close-on-press-escape="false"@close="reset"> <el-formid="#create":model="create":rules="rules"ref="create"label-width="100px"> <el-form-itemlabel="用户名"prop="username"> <el-inputv-model="create.username"></el-input> </el-form-item> <el-form-itemlabel="姓名"prop="name"> <el-inputv-model="create.name"></el-input> </el-form-item> <el-form-itemlabel="密码"prop="password"> <el-inputv-model="create.password"type="password"auto-complete="off"></el-input> </el-form-item> <el-form-itemlabel="确认密码"prop="checkpass"> <el-inputv-model="create.checkpass"type="password"></el-input> </el-form-item> <el-form-itemlabel="电话"prop="phone"> <el-inputv-model="create.phone"></el-input> </el-form-item> <el-form-itemlabel="邮箱"prop="email"> <el-inputv-model="create.email"></el-input> </el-form-item> <el-form-itemlabel="是否启用"> <el-switchon-text=""off-text=""v-model="create.is_active"></el-switch> </el-form-item> </el-form> <divslot="footer"class="dialog-footer"> <el-button@click="dialogCreateVisible=false">取消</el-button> <el-buttontype="primary":loading="createLoading"@click="createUser">确定</el-button> </div> </el-dialog> <!--修改用户begin--> <el-dialogtitle="修改用户信息"v-model="dialogUpdateVisible":close-on-click-modal="false":close-on-press-escape="false"> <el-formid="#update":model="update":rules="updateRules"ref="update"label-width="100px"> <el-form-itemlabel="姓名"prop="name"> <el-inputv-model="update.name"></el-input> </el-form-item> <el-form-itemlabel="电话"prop="phone"> <el-inputv-model="update.phone"></el-input> </el-form-item> <el-form-itemlabel="邮箱"prop="email"> <el-inputv-model="update.email"></el-input> </el-form-item> <el-form-itemlabel="是否启用"> <el-switchon-text=""off-text=""v-model="update.is_active"></el-switch> </el-form-item> </el-form> <divslot="footer"class="dialog-footer"> <el-button@click="dialogUpdateVisible=false">取消</el-button> <el-buttontype="primary":loading="updateLoading"@click="updateUser">确定</el-button> </div> </el-dialog>
因为有表单所以我们需要加入表单验证
以及添加和编辑弹出的状态
vm=newVue({
el:'#user',
//数据模型
data:function(){
varvalidatePass=(rule,value,callback)=>{
if(value===''){
callback(newError('请再次输入密码'));
}elseif(value!==this.create.password){
callback(newError('两次输入密码不一致!'));
}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;
varresource=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;
varresource=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)=>{
vardata=response.data;
if(datainstanceofArray){
this.$message.error(data[0]["message"]);
}
elseif(datainstanceofObject){
this.$message.error(data["message"]);
}
this.createLoading=false;
});
}
else{
//this.$message.error('存在输入校验错误!');
returnfalse;
}
});
},
//更新用户资料
updateUser(){
this.$refs.update.validate((valid)=>{
if(valid){
this.updateLoading=true;
varactions={
update:{method:'patch'}
}
varresource=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)=>{
vardata=response.data;
console.log(data);
if(datainstanceofArray){
this.$message.error(data[0]["message"]);
}
elseif(datainstanceofObject){
this.$message.error(data["message"]);
}
this.updateLoading=false;
});
}
else{
//this.$message.error('存在输入校验错误!');
returnfalse;
}
});
},
//删除单个用户
removeUser(user){
this.$confirm('此操作将永久删除用户'+user.username+',是否继续?','提示',{type:'warning'})
.then(()=>{
//向请求服务端删除
varresource=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);
varids=[];
//提取选中项的id
$.each(this.selected,(i,user)=>{
ids.push(user.id);
});
//向请求服务端删除
varresource=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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。