場(chǎng)景

ElementUI中的el-table怎樣實(shí)現(xiàn)多選與單選：

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

在上面實(shí)現(xiàn)多選和單選的基礎(chǔ)上，實(shí)現(xiàn)如果不勾選就點(diǎn)擊某按鈕時(shí)給予提示。

?

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

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

??????? <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="工號(hào)" align="center" prop="gh" /></el-table>

然后設(shè)置其勾選改變的事件handleSelectionChange

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

獲取多選框的ID,存儲(chǔ)進(jìn)事先聲明的數(shù)組

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

然后在點(diǎn)擊某個(gè)判斷是夠有選中的按鈕時(shí)

????????? <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>

設(shè)置其點(diǎn)擊事件

??? handleCompleted() {if (this.ids == null || this.ids.length == 0) {this.$alert("請(qǐng)先選擇一條數(shù)據(jù)", "提示", {confirmButtonText: "確定",});} else {handCompletedRequest(this.ids).then((response) => {if (response.code === 200) {this.msgSuccess("處理完成成功");this.open = false;this.getList();}});}},

判斷選中的數(shù)組為空的話彈出提示框，否則再請(qǐng)求后臺(tái)接口。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。