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;
      }
    },
相关推荐
Boilermaker19927 分钟前
【Java EE】Mybatis-Plus
java·开发语言·java-ee
千鼎数字孪生-可视化9 分钟前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月9 分钟前
7月10号总结 (1)
前端·css·css3
aramae12 分钟前
C++ -- STL -- vector
开发语言·c++·笔记·后端·visual studio
Tony小周12 分钟前
实现一个点击输入框可以弹出的数字软键盘控件 qt 5.12
开发语言·数据库·qt
天天扭码32 分钟前
很全面的前端面试——CSS篇(上)
前端·css·面试
lixzest33 分钟前
C++ Lambda 表达式详解
服务器·开发语言·c++·算法
EndingCoder35 分钟前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte40 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang44 分钟前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程