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的值,不然页面就会闪烁。
或者加&nbsp;,也可以,如下所示:

 <el-table-column label width="35" v-if="currentModuleType==2">
        <template slot-scope="scope">
          <el-radio :label="scope.row.id" v-model="selectRowId">&nbsp;</el-radio>
        </template>
      </el-table-column>
实现效果图

小优化:

以上就可以实现单选功能,下面是优化版本,可以直接点击行选中该行。
el-table监听方法 @row-click="singleElection"
方法实现如下:

  singleElection (row) {
     this.selectRowId = row.id;
   },
上一篇 下一篇

猜你喜欢

热点阅读