美文网首页
el-table实现radio单选

el-table实现radio单选

作者: 我是七月 | 来源:发表于2022-03-08 14: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;
   },

相关文章

网友评论

      本文标题:el-table实现radio单选

      本文链接:https://www.haomeiwen.com/subject/bcwprrtx.html