vue element ui 表格 selection-change方法使用(获取某行数据)

element table 多选表格，表格中有操作按钮的话，获取当前勾选行的数据，大家都知道用slot-scope="scope" 来获取，但如果要实现的功能是在表头上了，那要怎么获取当前前勾选的这一行的数据呢？这时我们可以用表格中提供的@selection-change="handleSelectionChange" 里的 multipleSelection来实现。

需求：当点击表格上的批量操作按钮时，怎么获取当前勾选的这一行的数据呢？

效果图

效果图

表格链接

element 多选表格

代码：

<!--表格 begin-->
<div slot="table" class="table-content">
    <div class="opertion-btn">
        <el-button class="btn" type="primary" @click="batchModifyRemark">批量备注</el-button>
    </div>
    <div class="table-warp">
       <u-table   // 这里的表格是封装后的组件
          :data="records"
          :border="true"
          @selection-change="handleSelectionChange"> // 主要用这个方法实现
        </u-table>
     </div>        
<!--表格 end-->

<!--批量修改备注信息 begin-->
       <el-dialog
               title="提示"
               :visible.sync="dialogModifyRemark"
               width="20%">
           <span>确定批量备注？</span>
           <span slot="footer" class="dialog-footer">
                <el-button @click="dialogModifyRemark = false">取 消</el-button>
                <el-button type="primary" @click="saveModifyClick">确 定</el-button>
           </span>
       </el-dialog>
<!--批量修改备注信息 end-->

// 这里是ts的语法，js的直接按js的语法来就可以了

/**
 * 显示批量修改备注弹框
 * @protected
 * @returns boolean 
 */
 protected dialogModifyRemark: boolean = false;

/**
 * 批量发送修改备注短信
 * @protected
 * @return boolean 
 */
  protected async batchModifyRemark(): Promise<void>
  {
        this.dialogModifyRemark = true;
  }

/**
 * 选中数据存放
 * @protected
 * @return array
 */
  protected multipleSelection: Array<any> = [];

/**
 * 表格中某一项选中
 * @protected
 * @return void
 */
 protected handleSelectionChange(val) {
       this.multipleSelection = val;
       console.log(this.multipleSelection)  // 当前选中的某一行打印出来的结果
  }

/**
 * 请求批量发送修改备注
 * @protected
 * @return void
 */
 protected async saveModifyClick(): Promise<void>
 {
     try
     {
          if (!this.multipleSelection.length) 
          {
                    this.$message.error("请选择需要备注的记录");
                    this.dialogModifyRemark = false;
                    return;
           }

           // multipleSelection是存放所有选中的某行的数据
          //  然后用map去循环数组里的数据并且拿到你想要的参数
           let ids = this.multipleSelection.map((item: any) => item.OrderId);    // 主要是这行代码实现

           const data = {
                    OrderIds: ids.join(","),  // 把数组以字符串拼接起来，用逗号隔开
             };

           let { content: result } = await this.orderService.sendModifyRemark(data);

           if(result)
           {
                    this.dialogModifyRemark = false;
                    this.$message.success("批量备注成功");
                    (this as any).onSearch();
           }
       }
            catch(err)
            {
                this.$message.error(err);
            }
}

打印结果

当前选中的某一行打印出来的结果

第二种方法

利用表格 type="selection"属性实现，这种方法不用在data里定义一个全局数组，而定义的是用来接收你当前循环的某个参数，这样你要获取多少个参数就是单独写多少次。

<el-table
  @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="50">
  </el-table-column>
</el-table>

data(){
  return{
      pufaCertificateNo: []
  }
}

methods: {
  handleSelectionChange(selection) {
      this.pufaCertificateNo = [];
      selection.forEach(item => {
        this.pufaCertificateNo.push(item.certificateNo);
      });
  }
}