ElementUI中的el-table實現多選框不勾選的提示

場景

ElementUI中的el-table怎樣實現多選與單選：

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

在上面實現多選和單選的基礎上，實現如果不勾選就點擊某按鈕時給予提示。

 

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

首先在頁面上添加多選或者單選框

        <el-table v-loading="loading" :data="ddjlList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="id" align="center" prop="id" v-if="false" />
          <el-table-column label="工號" align="center" prop="gh" />
        </el-table>

然后設置其勾選改變的事件handleSelectionChange

    // 多選框選中數據
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },

獲取多選框的ID,存儲進事先聲明的數組

  data() {
    return {
      // 選中數組
      ids: [],

然后在點擊某個判斷是夠有選中的按鈕時

          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleCompleted"
              v-hasPermi="['kqgl:ddjl:add']"
            >處理完成</el-button>
          </el-col>

設置其點擊事件

    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();
          }
        });
      }
    },

判斷選中的數組為空的話彈出提示框，否則再請求后台接口。