实际效果可以自行复制下面代码查看
后续可以自己封装成 table 组件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"><title>element-ui单选表格行</title><meta name="description" content="test"><meta name="Keywords" content="test"><link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css"><link href="/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"><style type="text/css"></style></head><body><div id="app"><el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @row-click="showRow" @current-change="handleCurrentChange" highlight-current-row ><el-table-column width="50"><template slot-scope="scope"><el-radio v-model="radio" :label="scope.$index"> </el-radio></template></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="mobileNumber" label="电话号码" width="120"></el-table-column><el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column></el-table></div><script src="/npm/vue"></script><script src="/element-ui/lib/index.js"></script><script type="text/javascript">let vm = new Vue({el: '#app',data() {return {radio: '',tableData: [{radioId: '0',name: 'lokka',mobileNumber: '11111111111111111',address: '北京市朝阳区十里堡 123 号'}, {radioId: '1',name: 'lokka',mobileNumber: '11111111111111111',address: '北京市朝阳区十里堡 123 号'}, {radioId: '2',name: 'lokka',mobileNumber: '11111111111111111',address: '北京市朝阳区十里堡 123 号'}, {radioId: '3',name: 'lokka',mobileNumber: '11111111111111111',address: '北京市朝阳区十里堡 123 号'}, {radioId: '4',name: 'lokka',mobileNumber: '11111111111111111',address: '北京市朝阳区十里堡 123 号'}, {radioId: '5',name: 'lokka',mobileNumber: '11111111111111111',address: '北京市朝阳区十里堡 123 号'}, {radioId: '6',name: 'lokka',mobileNumber: '11111111111111111',address: '北京市朝阳区十里堡 123 号'}]}},methods: {showRow(row) {//赋值给radiothis.radio = this.tableData.indexOf(row)console.log(this.tableData.indexOf(row))},getCurrentRow(val) {console.log(val)},handleCurrentChange(currentRow, oldCurrentRow){console.log(currentRow)this.currentRow = currentRowthis.getCurrentRow(this.tableData.indexOf(currentRow))}}});</script></body></html>
