目录

elementUI 表格组件结合单选框做单选效果显示

实现的效果:点击表格行,前面的radio框实现勾选

代码

javascript 复制代码
      <el-table-column align="center" label="选择" width="70">
        <template #default="scope">
          <el-radio-group v-model="scope.row.isChecked">
            <el-radio :value="true"></el-radio>
          </el-radio-group>
        </template>
      </el-table-column>

value值一定要绑定一个bool值,且为真,isChecked是row上新加的一个属性,目的是实现单选框的勾选状态。

表格

javascript 复制代码
    <el-table :data="apiTableData" 
       style="width: 100%" 
       highlight-current-row
       @current-change="handleTableChange"
       @cell-click="handleCellClick"
       border>

事件

javascript 复制代码
/** 单选表格 */
const handleTableChange =(cur,old)=>{
  cur.isChecked=true
  if(old){
    old.isChecked = false
  }
}
/** 点击单元格 */
const handleCellClick = (cur)=>{
  cur.isChecked = true
}
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
敲代码的彭于晏21 分钟前
前端上传与下载基础:Blob、File与ArrayBuffer详解
前端
緑水長流26 分钟前
什么是Promise?什么是async和await?
前端·javascript·vue.js
Mintopia27 分钟前
Three.js 相机(Camera)的使用详解
前端·javascript·three.js
wordbaby30 分钟前
PC 屏幕自适应的流行方案解析
前端
Mintopia30 分钟前
Node.js 中path模块的深度解析与实战应用
前端·javascript·node.js
程序员小续31 分钟前
git rebase 和git merge使用及区别
前端·git·后端
静待一世花开32 分钟前
React基础学习
前端
华科云商xiao徐33 分钟前
使用Scrapy编写图像下载程序示例
前端
WillaWang33 分钟前
html结构中图片下方的间隙
前端
阿笑带你学前端34 分钟前
从0到1:我用Flutter造了个全平台IPTV神器,从此看直播不再"精神分裂"!
前端·flutter