1.多选按照官网即可,单选时候需要使用插槽,并且使用一个单选的标签。
<el-table :data="tableData" style="width: 100%"
@selection-change="handleSelectionChange" @current-change="handleCurrentChange">
<el-table-column label="选择项" width="55">
//插槽
<template slot-scope="scope">
<el-radio v-model="tableRadio" :label="scope.row"></el-radio>
</template>
</el-table-column>
</el-table>
2. 如下定义即可实现点击单选选中 切换点击row时单选框也一起变
data() {
return {
//控制当前单选选中的值
tableRadio: '',
//当前选中的row内容
currentRow: null
}
},
methods: {
//选择单选框之后触发
handleSelectionChange(currentRow) {
this.tableRadio = currentRow
},
//点击row触发
handleCurrentChange(val) {
this.currentRow = val;
//关键之处
this.tableRadio=val
}
}