关于vue.js:vueelement中switch使用二

58次阅读

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

正文完
 0