vue elementui点击表格当前行radio单选选中

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

官方文档：https://element.eleme.cn/#/zh-CN/component/radio

参考：https://www.cnblogs.com/steamed-twisted-roll/p/10120106.html

https://segmentfault.com/q/1010000016009668

https://segmentfault.com/q/1010000018827314

关键的几个配置：

higlight-current-row// element-ui提供的单选方法，可以使当前选中行高亮

@current-change="handleSelectionChange"//单选方法，返回选中的表格行

使用v-model绑定单选框，

:label的绑定属性为:label="scope.row.id"，采用每条项目唯一的标识值

handleSelectionChange的方法使用this.radio = row.id来选中单选按钮

@row-click="chooseone"：单击数据行

<el-table
:data="list"
height="500"
border
style="width: 100%"
@row-click="chooseone"
@row-dblclick="openDetails"
highlight-current-row
@current-change="handleSelectionChange"
>

<el-table-column width="55">
<template slot-scope="scope">
<el-radio v-model="radio" :label="scope.row.id">
<span class="el-radio__label"></span>
</el-radio>
</template>
</el-table-column>

data() {
return {
total: 0, //总记录数
currentPage: 1, //当前页码
pageSize: 10, // 每页显示10条数据
list: [],
radio: null, // 如果使用单选框，定义一个model值
currentSelectItem: {} //当前选中的值
};

handleSelectionChange(row) {
console.log(row);
this.currentSelectItem = row;
}

chooseone(row){
this.radio = row.id
},