官方文档: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来选中单选按钮
<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; }
原文:https://www.cnblogs.com/flypig666/p/11679566.html