点击true 再点击一次是false input的type是checkbox取消是勾选取消

200 阅读1分钟
       <el-button
      type="danger"
      icon="el-icon-delete"
      size="mini"
      @click="handleDelete"
      v-hasPermi="['iot:floor:remove']"
      >删除</el-button
    >
  </el-form-item>
</el-form>
<div id="historicalRecode">
  <div v-if="imageList">
    <div :images="imageList" class="flex">
      <div
        v-for="(item, index) in imageList"
        :key="index"
        class="imgs-border"
        :title="item.alias + item.floor"
      >
        <input
          type="checkbox"
          name="delImg"
          class="delImg fr"
          id="input"
          v-show="delAniu"
          @click="del(item, $event)"
        />
     

     
        delAniu: false,
          flag: false,

            /** 删除按钮操作 */
                handleDelete() {
                //删除按钮点击一次是true input的单选框出现 再点击一次取反
                  this.flag = !this.flag;
                  this.delAniu = !this.delAniu;
                },
                // input删除操作  e 这个是为了让checkbox为false 
                del(row, e) {
                  const that = this;
                  const floorids = row.floorid || this.ids;
                  this.$confirm(
                    '是否确认删除楼层编号为"' + floorids + '"的数据项?',
                    "警告",
                    {
                      confirmButtonText: "确定",
                      cancelButtonText: "取消",
                      type: "warning"
                    }
                  )
                    .then(function() {
                      return delFloor(floorids);
                    })
                    .then(() => {
                      this.getList();

              this.msgSuccess("删除成功");
              e.target.checked = false;
            })
            .catch(function(action) {
              //判断是 cancel (自定义的取消) 还是 close (关闭弹窗)
              // 然后把这个input选择取消
              if (action === "cancel") {
                e.target.checked = false;
              }
            });
},

点击取消 上面勾选为false image.png