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.---留神:本文章只是作者不便今后应用,本人写的一个笔记,写的不好请勿喷!谢谢了解!