el-table复选框单选及回显

复选框单选

<el-table
    :date="list"
    :selection-change = "selectChange"
    @select = "selectRow" //主要
    @select-all = "selectAll" //主要
    ref = "tableInfo"//主要
  >
<el-table-column type = "selection" with = "40"/>
...
</el-table>
data(){
  return{
    selected:[]
  }
}

JS

selectChange(data){
  this.selected = data;
  //this.selected = data.map((item) => item.deptId);
}

selectRow(selection, row){
  if(selection.length > 1){
    let del_row = selection.shift();
    this.$refs.tableInfo.toggleRowSelection(del_row,false);
  }
}

selectAll(selection){
  if(selection.length > 1){
    selection.length = 1;
  }
}

回显

const {a, b} = this;
b.forEach((row) => {
  if(b.depeId === a.deptId){
    this.$nextTick(() =>{
      this.$refs.tableInfo.toggleRowSelection(row,true); //主要
    })
  }
})

你可能感兴趣的:(Vue,vue.js,elementui,前端)