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;
      }
    },
相关推荐
挽淚2 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴3 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
惜.己5 分钟前
使用python的读取xml文件,简单的处理成元组数组
xml·开发语言·python·测试工具
sunbyte7 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常8 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常10 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101813 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
南篱15 分钟前
JavaScript 中的 this 关键字:从迷惑到精通
javascript
Struggler28121 分钟前
Chrome插件开发
前端
apihz28 分钟前
域名WHOIS信息查询免费API使用指南
android·开发语言·数据库·网络协议·tcp/ip