vue点击el-switch开关，弹出提示框（点击事件js触发弹框）

 html

          <el-table-column
            prop="state"
            label="是否可见"
            min-width="180"
            align="center"
          >
            <template slot-scope="{ row }">
              <div>
                <el-switch
                  @click.native="bulletinSwitch(row.id, row.state)"
                  v-model="row.state"
                  active-color="#FF570F"
                  inactive-color="#4a4a4a"
                  :active-value="1"
                  :inactive-value="2"
                  disabled
                >
                  <!-- @change="bulletinSwitch(row.id, row.state)" -->
                </el-switch>
              </div>
            </template>
          </el-table-column>

 

---

methods

    // 官方公告的是否可见 的switch事件
    async bulletinSwitch(itemId, itemState) {
      console.log(itemId, itemState, "官方公告的id和状态-----");

      this.$confirm(
        `${itemState == 2 ? "启用" : "停用"}后，官方公告 将会 ${
          itemState == 2 ? "发布" : "无法撤回"
        }，请选择`,
        `确定${itemState == 2 ? "启用" : "停用"}该官方公告吗？`,
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        }
      ).then(async () => {
        itemState = itemState == 2 ? 1 : 2;
        const res = await getUpdateNoticeInfo({
          userId: "1",
          id: "" + itemId,
          state: itemState,
        });
        if (res.status === 200) {
          console.log(res, "111111");
          this.$message.success("状态改变成功");
          this.getNoticeList();
        } else {
          this.$message.error("操作有误，请重新操作。");
        }
      });
    },

 

---

 原始开关的写法

    // 原始的写法，没有弹窗的
    // bulletinSwitch(itemId, itemState) {
    //   console.log(itemId, itemState, "官方公告的id和状态-----");
    //   // 修改官方公告信息-可不可见-1可见2不可见
    //   getUpdateNoticeInfo({
    //     userId: "1",
    //     id: "" + itemId,
    //     state: itemState,
    //   }).then((res) => {
    //     // console.log(res, "修改是否可见的返回值-----");
    //     if (res.status === 200) {
    //       this.$message.success("修改是否可见成功");
    //       this.getNoticeList();
    //     } else {
    //       this.$message.error("操作有误，请重新操作。");
    //     }
    //   });
    // },