ElementUI中的el-table实现多选框不勾选的提示

忘是亡心i 2023-10-06 14:11 24阅读 0赞

## 场景 ##

ElementUI中的el-table怎样实现多选与单选：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/107769640][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_107769640]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][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();
              }
            });
          }
        },

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

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_107769640]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107769640
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020080408435543.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi