el-table实现radio单选
2022-03-08 本文已影响0人
我是七月
直接上代码:
<el-table-column label width="35" v-if="currentModuleType==2">
<template slot-scope="scope">
<el-radio :label="scope.row.id" v-model="selectRowId">{{""}}</el-radio>
</template>
</el-table-column>
这里有一个技巧点,就是el-radio加上{{""}},就可以不显示lable的值,不然页面就会闪烁。
或者加 ,也可以,如下所示:
<el-table-column label width="35" v-if="currentModuleType==2">
<template slot-scope="scope">
<el-radio :label="scope.row.id" v-model="selectRowId"> </el-radio>
</template>
</el-table-column>
实现效果图
小优化:
以上就可以实现单选功能,下面是优化版本,可以直接点击行选中该行。
在el-table监听方法 @row-click="singleElection"
方法实现如下:
singleElection (row) {
this.selectRowId = row.id;
},