Element-ui之@selection-change 【获取复选框集合】

     项目有个需求，由于在原来写好的页面上，以尽量不修改原码为初衷，继续完善页面，遇到这么一个问题，就是源码中页面展示列表是用的Element中的<el-table>，所以，需求就是要实现多选表格中获取所选中的集合的id值，并且id要以" ， " 隔开作为接口传参，于是Element中的 selection-change 方法解决了这个问题。如果对宁们有所帮助，就给怂怂右上角点个赞吧，宁们的赞就是对我继续写笔记的动力源泉啊！

 起初，list展示是用<v-modal>起头，这是一个弹框，点击触发弹框展示；

<v-modal :id="'modal-kafkauser'" :title="'关联平台用户'">
        <div slot="body">
          <div style="width: 95%;margin: 0 auto;">
            <el-input style="height:31px;line-height: 31px;font-size: 12px !important; width: 230px; border-radius: 0 4px 4px 0;" clearable size="mini"
                      placeholder="输入用户id" prefix-icon="el-icon-search" v-model="searchUserId" @change="initUserTable()"></el-input>
          </div>
          <el-table
            ref="singleTable"
            :data="userTable.records"
            style="width: 95%;margin: 12px auto;"
            highlight-current-row
            @selection-change="handleSelectChange">
            <el-table-column
              type="selection"
              width="50">
            </el-table-column>
            <el-table-column
              label="id"
              prop="id">
            </el-table-column>
            <el-table-column
              label="用户名"
              prop="username">
            </el-table-column>
            <el-table-column
              label="姓名"
              prop="nickname">
            </el-table-column>
            <el-table-column
              prop="organizationName"
              label="所属组织机构">
            </el-table-column>
          </el-table>
          <el-pagination background style="width: 95%; margin: 0 auto;"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChangetrue"
                         :current-page.sync="agencyCurrentPage"
                         :page-sizes="[10, 20, 30, 40]"
                         :page-size="10"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="userTable.total">
          </el-pagination>
        </div>
        <div slot="footer">
          <button type="button" @click="confirmSelect" class="btn btn-success">确定</button>
          <button type="button" class="btn btn-default" data-dismiss="modal" ref="closeModalBtn">取消</button>
        </div>
      </v-modal>

 这是页面效果：

需求就是在源码的基础上实现复选获取选中的数据中获取该数据集的ids；

所以，直接在表头上添加了一个选中就触发的方法；用来获取每选中的数据集对象；

 具体方法实现：

大家请看：

这样就可以了，val获取到就是选中的对象集合；

随后，你拿到，随你是作何处理，val.length = 3; 表示你所选中三条记录；

回归正题，拿到了所选中的记录，再要拿到记录中的每个id，好办，直接遍历循环即可

 对吧，打印出来就是所需要的，用逗号隔开的String字符串；

大伙儿学会了吗？