el-switch的使用

最新推荐文章于 2024-10-10 08:47:52 发布

散热o

最新推荐文章于 2024-10-10 08:47:52 发布

阅读量218

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/sanrok/article/details/136944566

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue应用中使用el-switch组件控制服务的开启和关闭，包括改变开关状态时的确认弹窗提示以及与后端API的交互，展示了active-value和inactive-value的参数作用。

摘要由CSDN通过智能技术生成

el-switch的使用

实际情况为开启或者停止一个服务

 
<el-table-column
          label="启停"
          min-width="50"
          align="center"
>
<template #default="scope">
	<el-switch 
               @change="
                        (val) => {
                        changeSwitch(val, scope.row.id);
                        }
                        "
               :value="scope.row.status"
               active-value = "1" 
               inactive-value = "0">
    </el-switch>
 </template>
</el-table-column>

//此处为methods部分
async changeSwitch(val, id) {
    //通过status来动态获取 确认弹窗的参数
   const tryBehavior = val === "1" ? "开启" : "关闭";
    try {
      await this.$confirm(`确认${tryBehavior}？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        type: "warning",
      });
    } catch (err) {
      console.log("用户点击了取消", err);
      return;
    }

    try {
      let res = await this.$http.put(`yqiot/iotconfigwarnconfig/openOrClose/${id=id}`);
      if (res.data.code === 0) {
        this.$message.success("操作成功！");
       //再刷新一次
        await this.getList();
      } else {
        this.$message.warning(`${res.data.msg}`);
      }
    } catch (error) {
      console.log("error: ", error);
    }
  },

下面再描述一下组件用的常用参数

active-value 这个就是switch开关打开时的值默认值为 true ，支持的类型有boolean、string、number
inactive-value 这个就是switch开关关闭时的值默认值为 true ，支持的类型有boolean、string、number