el-Switch 开关之前结合$confirm弹出确认框

227 阅读1分钟

PixPin_2024-01-04_15-31-34.gif

html

<el-table-column label="确认保养" prop="state">
     <template slot-scope="scope">
            <el-switch
              v-model="scope.row.state"
              @change="getState(scope.row)"
              active-color="#13ce66"
              inactive-color="#C0CCDA"
              active-value="1"
              inactive-value="0"
            />
      </template>
  </el-table-column>

js

 async getState(row) {
      row.state = row.state === "1" ? "0" : "1";
      let text = "";
      if (row.state == "1") {
        text = "确认是否取消保养?";
      } else {
        text = "确认是否开始保养?";
      }
      this.$confirm(text, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
         // 确定之后发送请求
          const res = await confirmRepair()
        })
        .catch(function () {
          row.status = row.status === "1" ? "0" : "1";
        });
    },