场景
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();
}
});
}
},
判断选中的数组为空的话弹出提示框,否则再请求后台接口。