element表格实现单选框

利用checkbox来实现表格单选,思路就是将checkbox的值绑定到当前行mainFlag,定义checkbox的change事件,每当值改变时将上次选中的行数据mainFlag改给false

html 复制代码
 <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column label="单选项" width="50">
            <template slot-scope="scope" >
              <el-checkbox 
              @change="handleChangeMain( scope.row,scope.$index)" 
              v-model="scope.row.mainFlag" >
              </el-checkbox>
            </template>
          </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

data中定义mainPetionIndex用来记录上一次选择的下标

javascript 复制代码
 handleChangeMain(row,index){
      if(row.mainFlag){
        if(this.mainPetionIndex != -1){
          console.log('mainPetionIndex', this.mainPetionIndex)
          this.tableData[this.mainPetionIndex].mainFlag = false
        }
        this.mainPetionIndex = index;
      }else{
        this.mainPetionIndex=-1;
      }
    },
相关推荐
起个昵称吧14 分钟前
立即数、栈、汇编与C函数的调用
c语言·开发语言·汇编
子豪-中国机器人21 分钟前
枚举算法和排序算法能力测试
开发语言·c++·算法
新手村领路人33 分钟前
Firefox自定义备忘
前端·firefox
乖女子@@@1 小时前
css3新增-网格Grid布局
前端·css·css3
百思可瑞教育1 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
VBA63371 小时前
如何学习VBA:换一种思路思考问题,利用数据库实现数据处理自动化
开发语言
0_0梅伊阁诗人1 小时前
Django ORM 模型
开发语言·数据库·笔记·python·oracle·django
林夕忆梦_猫1 小时前
初识C++
开发语言·c++
伐尘1 小时前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向
不想吃饭e2 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app