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;
      }
    },
相关推荐
RoyLin几秒前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗4 分钟前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀69617 分钟前
CSS-响应式布局
前端
三小河22 分钟前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法26 分钟前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku27 分钟前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀69630 分钟前
2025-35st-w-日常开发总结
前端
我是日安32 分钟前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
小lan猫37 分钟前
React学习笔记(一)
前端·react.js
晨米酱37 分钟前
JavaScript 中"对象即函数"设计模式
前端·设计模式