element-ui table 实现单选 和 多选

一、单选实现：

1、table 部分绑定方法 ：

<el-table
         :data="tableData"
         @row-click = "showRow"
>

 2、column 部分 ：

 <el-table-column label="选择" width="50" align="center">
    <template slot-scope="scope">  
    <el-radio class="radio"  v-model="radio"  :label="scope.$index">&nbsp;</el-radio>
   </template>
</el-table-column> 

 3、data 部分 ：

data:{
   return{
     tableData: [],  multipleSelection: [], 
 radio: '',
 selected:{} 
}

}, 

4、method 部分：

  showRow(row){ 
     //赋值给radio 
       this.radio = this.tableData.indexOf(row);
	this.selected=row;
 }, 

二、多选实现

1、table 部分绑定方法：

 <el-table
         :data="tableData"
         ref="multipleTable"
         @selection-change="handleSelectionChange"
>

2、column 部分 ：

<el-table-column
      type="selection"
      align="center"
      width="55">
</el-table-column> 

3、data 部分：

  data:{ 
return {
 tableData: [], 
 multipleSelection: [] 
}
 
}, 

4、method 部分 ：

handleSelectionChange(val) { 
//选择的数据
 this.multipleSelection = val;
//获取所有选中项的id属性的值 
this.multipleSelection = val.map(item => item.id)
 }, 

三、 点击列中的按钮 实现该行被选中

1、column 部分 ：

 <el-table-column label="操作" width="360"  align="center" >
      <template slot-scope="scope">
         <el-button type="danger" plain
           size="mini"
           @click="delOne(scope.$index, scope.row)">删除
         </el-button>
      </template>
</el-table-column> 

2、method 部分：

 delOne(index, row){ 
    this.$refs.multipleTable.toggleRowSelection(row); 
 }