Element el-table實現單選操作

在使用el-table實現選擇操作的時候，官方提供了一種多選功能，將type設置為selection。而有時候因項目需求，需要進行單選操作，接下來通過一個簡單的例子，實現el-table表格單選操作。顯然要實現單選，需要用el-radio標簽來實現，代碼如下：

 

<el-table
ref="multipleTable"
:data="tableData"
:header-cell-style="{background:'#F8F8F9'}"
style="width: 100%;margin-top: 20px">
<el-table-column label="選擇" align="center" width="65">
<template scope="scope">
<el-radio :label="scope.$index" v-model="radio"
@change.native="getCurrentRow(scope.row)"></el-radio>
</template>
</el-table-column>
<el-table-column align="center" label="編號" width="160" prop="studentCode"></el-table-column>
<el-table-column align="center" prop="name" label="姓名" width="120"></el-table-column>
<el-table-column align="center" prop="phone" label="賬號"></el-table-column>
</el-table>

 

在使用el-radio標簽的時候，需要綁定label的值，這里label我綁定的是index，有時候在單選位置是不需要將label的值顯示出來，這個時候只需要在el-radio標簽里面加上'&nbsp ;'即可。

<el-radio :label="scope.$index"
v-model="radio"
@change.native="getCurrentRow(scope.row)">&nbsp;</el-radio>

 

js代碼實現如下：

data: {
return() {
templateSelection: {}，
radio: '',
tableData: []
}
}
methods: {
getCurrentRow(row){
// 獲取選中數據 row表示選中這一行的數據，可以從里面提取所需要的值
this.templateSelection = row
}
}