```
<el-table
:data="cardList"
:header-cell-style="{ lineHeight:'20px', backgroundColor:'#eef1f6' }"
empty-text="暂无数据"
@selection-change="handleSelectionChange"
>
<el-table-column width="35">
<template slot-scope="scope">
<el-radio v-model="selectedRadio" :label="scope.row.id" />
</template>
</el-table-column>
<el-table-column label="卡类型">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
</el-table>
<section v-if="selectedRadio">选中的：{{ getSelected.name }}</section>
export default {
data() {
return {
cardList: [
{ id: 1, name: '信用卡' },
{ id: 2, name: '储蓄卡' },
{ id: 3, name: '校园卡' },
{ id: 4, name: '会员卡' },
{ id: 5, name: '电话卡' },
{ id: 6, name: '公交卡' },
],
selectedRadio: '',
}
},
computed: {
getSelected() {
return this.cardList.find((v) => v.id === this.selectedRadio) || {}
},
},
methods: {
handleSelectionChange(currentRow) {
this.selectedRadio = currentRow
},
},
}
```
效果图：
