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

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

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

效果图

效果图

表格链接

element 多选表格

代码：

    

        批量备注
    
    

        // 主要用这个方法实现
        
     
        



       
           确定批量备注？
           
                取 消
                确 定
           
       

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

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

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

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

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

/**
 * 请求批量发送修改备注
 * @protected
 * @return void
 */
 protected async saveModifyClick(): Promise
 {
     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里定义一个全局数组，而定义的是用来接收你当前循环的某个参数，这样你要获取多少个参数就是单独写多少次。

  
  


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

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