vue elementui表格获取某行数据(slot-scope和selection-change方法使用)

效果图:

vue elementui表格获取某行数据(slot-scope和selection-change方法使用)_第1张图片

1.当写后台管理页面时,使用element ui里的table表格时,表格中有操作按钮,获取当前行的数据时,我们可以使用 slot-scope="scope"来获取。

 
      
  audit(row){
     console.log(row)
    },

打印可得当前行数据,你就可以处理这些数据了

vue elementui表格获取某行数据(slot-scope和selection-change方法使用)_第2张图片

 2.但如果要实现的功能是在表头上了,例如图里的批量审核,那要怎么获取当前前勾选的这一行的数据呢?这时我们可以用表格中提供的@selection-change="handleSelectionChange" 的multipleSelection来实现。


 data(){
  return {
    multipleSelection:[]
   }
} 
//获取所有选择的项
    handleSelectionChange(val) {
    console.log(val)
      this.multipleSelection = val;
    },

打印可得当前行数据,你就可以处理这些数据了

vue elementui表格获取某行数据(slot-scope和selection-change方法使用)_第3张图片

例如: 


        批量审核
    //批量审核
    batchTransferTip() {
      if (this.multipleSelection.length == 0) {
        this.common.messageTip("请选择要审核的作品", "error");
        return false;
      } else {
        this.editboxName = "verify";
        let planIdList = [];
    //遍历数据
        for (let item of this.multipleSelection) {
          planIdList.push(item.id);
        }
        this.propData.id = planIdList;
      }
    },

注意:this.multipleSelection.length 为选择了多少项。

拿当前选中的行的数据,进行传值,实现批量审核功能。

你可能感兴趣的:(Element,UI,elementui,vue.js)