vue+element中switch使用

时间:2020-9-1 作者:admin

vue+element中switch使用

1.开发环境 vue+element
2.电脑系统 windows 10 专业版
3.在使用 vue+element 开发的过程中,我们根据不同的需求可能会使用到 element中的开关组件 switch !下面我简单的说一下我的使用方法希望对你有所帮助!代码如下:

在 vue中template 中添加如下代码:

<el-table-column
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column label="是否启动" align="center" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isSign"
              active-value="0"
              inactive-value="1"
              @change="handleStatusChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>

//解释说明: v-model绑定的值是: 来自后台的控制 开关组件的状态,相当于 是 true 和 false ;因为后台返回给我们的是 0 和 1,所以我们要把 0和1转换成 对应的 true 和 false 。具体的使用参考:element 官网 element 中 switch的使用。根据官网描述: active-value 是 switch 打开时的值;inactive-value 是 switch 关闭时的值。

4.在 methods 中添加如下代码:

handleStatusChange(row) {
        let text = row.isSign === "0" ? "启动" : "停止";
        this.$confirm('确认要"' + text + '""' + row.name + '"角色吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return changeStatus(row.id, row.status);
        }).then(() => {
          this.msgSuccess(text + "成功");
        }).catch(function () {
          row.isSign = row.isSign === "0" ? "1" : "0";
        });
      },
//在methods中这段代码的需求要看个人和项目的需求,
//解释说明: row.isSigin 表示取到了对应的 后台控制状态的字段,
isSign 是来自后台的状态;

5.接下来你就会看到了对应的效果,希望对你有所帮助,是不是很棒!让我们一起努力走向巅峰!在这个领域不要低头,不要认输!

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。