利用checkbox来实现表格单选,思路就是将checkbox的值绑定到当前行mainFlag,定义checkbox的change事件,每当值改变时将上次选中的行数据mainFlag改给false
<template><el-table:data="tableData"style="width: 100%"><el-table-column label="单选项" width="50"><template slot-scope="scope" ><el-checkbox @change="handleChangeMain( scope.row,scope.$index)" v-model="scope.row.mainFlag" ></el-checkbox></template></el-table-column><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></template>
data中定义mainPetionIndex用来记录上一次选择的下标
handleChangeMain(row,index){if(row.mainFlag){if(this.mainPetionIndex != -1){console.log('mainPetionIndex', this.mainPetionIndex)this.tableData[this.mainPetionIndex].mainFlag = false}this.mainPetionIndex = index;}else{this.mainPetionIndex=-1;}},
)
