如何让ElementUI的el-table多选框不勾选时显示个性化提示？

本文共计455个文字，预计阅读时间需要2分钟。

场景+在表面上实现多选和单选的基础之上，实现如下功能：+如果不确定选择，点击某个按钮时给予提示。+注意：+关注公众号+获取编程相关书籍、教程推送与免费下载。+实现+首先在页面上添加点击获取提示按钮。

场景

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

注：

关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。

实现

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

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

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