場景

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

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

總結

以上是生活随笔為你收集整理的ElementUI中的el-table实现多选框不勾选的提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。