共计 1339 个字符,预计需要花费 4 分钟才能阅读完成。
vue+element 中 switch 应用二
1. 开发环境 vue+element
2. 电脑系统 windows 10 专业版
(// 留神: 本次只是为了作者本人不便今后翻阅, 记录的文章, 写的不好, 请勿喷!)
3. 在开发的过程中, 咱们总是会应用到 vue+element 进行开发, 通常会应用到 element 的 switch 开关! 具体如下:
效果图:
3-1: 点击批改 按钮 , 成果如下:
通过批改 无效的开关, 决定是否显示对应的状态!
// 通过上图可知,id 为 5 的数据此时是关上的状态, 点击批改进行批改对应的状态并实现自动更新对应的状态, 不须要手动刷新! 代码如下:
3-2: 在 methods 中增加如下代码:
bianhua(){
var _this=this;
var ee={
id:_this.chenxgid,
code:_this.bianhao,
name:_this.mingcheng,
isSign:_this.show0
}
Cxiugai(ee).then(res=>{console.log(res);
if (_this.ChenCode=="0"){this.$message('批改胜利啦');
_this.open=false;
_this.jiazai();}else {this.$message('批改失败啦');
}
})
},
// this.ChenCode 是在 return 上面定义的:
3-3: 在 methods 中增加批改的办法的代码:
// 点击批改
xiugai(rows){
var _this=this;
console.log(rows)
console.log("我是批改 ------------------------");
// console.log(rows[index]);
// _this.bianhao=rows[index].code;
// _this.mingcheng=rows[index].name;
// // _this.handleAdd();
// _this.handleEdit();
this.open = true;
this.title = "批改";
console.log(rows);
console.log("我是对应的 id");
console.log(rows.id);
_this.chenxgid=rows.id;
var dd={
id:rows.id,
code:_this.bianhao,
name:_this.mingcheng,
isSign:_this.show0
}
chenxiugai(dd).then(res=>{console.log("传完 id 之后, 后盾返回对应的数据");
console.log(res);
_this.ChenCode=res.code;
if (res.id!=""){
// 如果 id 不为空, 示意有数据,
// _this.handleEdit();
// 把后盾的数据渲染到表单下面
_this.hqxg=res.data;
_this.bianhao=_this.hqxg.code;
_this.mingcheng=_this.hqxg.name;
// 存一下 状态 code 判断是否批改胜利啦
}
})
},
4.— 留神: 本文章只是作者不便今后应用, 本人写的一个笔记, 写的不好请勿喷! 谢谢了解!
正文完