ElementUI中的el-table实现多选框不勾选的提示

场景

ElementUI中的el-table怎样实现多选与单选：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107769640

在上面实现多选和单选的基础上，实现如果不勾选就点击某按钮时给予提示。

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先在页面上添加多选或者单选框

然后设置其勾选改变的事件handleSelectionChange

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

获取多选框的ID,存储进事先声明的数组

  data() {
    return {
      // 选中数组
      ids: [],

然后在点击某个判断是够有选中的按钮时

          
            处理完成
          

设置其点击事件

    handleCompleted() {
      if (this.ids == null || this.ids.length == 0) {
        this.$alert("请先选择一条数据", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        handCompletedRequest(this.ids).then((response) => {
          if (response.code === 200) {
            this.msgSuccess("处理完成成功");
            this.open = false;
            this.getList();
          }
        });
      }
    },

判断选中的数组为空的话弹出提示框，否则再请求后台接口。