批量删除按钮无选择禁止点击，选择后进行删除

最新推荐文章于 2023-10-15 22:10:59 发布

xiaoming_0208

最新推荐文章于 2023-10-15 22:10:59 发布

阅读量171

点赞数

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

本文链接：https://blog.csdn.net/xiaoming4965/article/details/128915980

版权

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

该段代码展示了在Vue.js应用中，如何处理表格数据的选择变化以及实现删除功能。`handleSelectionChange`函数用于更新选中项的ID数组，`handleDelete`方法确认并执行删除操作。`disabled`属性与多选状态关联，控制按钮的可用性。

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

:disabled="multiple"   @selection-change="handleSelectionChange"

  <el-button
          type="text"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:alarm_message:remove']"
          >删除</el-button
        >

 <el-table
      v-loading="loading"
      :data="alarm_messageList"
      :row-class-name="TableRowClassName"
      @selection-change="handleSelectionChange"
      v-model="flag"
      v-if="flag == false"
    >

 return {
      imageShow: process.env.VUE_APP_BASE_API+"/profile",
      // 遮罩层
      loading: true,
      // 表单内上下
      nextOpen: false,
      preOpen: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 报警信息表格数据
      alarm_messageList: [],
      // 不分页的报警信息数据
      alarms: [],
      // 弹出层标题
      title: "",
      // 日期范围
      dateRange: [],
      // 监控区域树选项
      deptOptions: undefined,
      // 是否显示弹出层
      open: false,
      // 缩略图
      flag: false,

      data: [],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pushType: null,
        pushTime: null,
        level: null,
        status: null,
        monitorId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      pushTypeOptions: [],
    };

this.multiple = !selection.length; 判断长度

// 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

   /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除报警信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return delAlarm_message(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },