element-ui表格table中复选框只能选中一个

问题:

el-table中实现单选,选中一个其他的取消选中

代码:

javascript 复制代码
<template>
  <div>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      ref="singleTable"
      highlight-current-row
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        name: '张三',
        address: '上海市普陀区金沙江路 1517 弄'
      }],
      selectedRow: null // 用于存储当前选中的行
    };
  },
  methods: {
   handleSelectionChange(selection) {
       if (Array.isArray(selection) && selection.length > 1) {//点击勾选框
        this.$refs.singleTable.toggleRowSelection(selection[0],false);
        this.$refs.singleTable.toggleRowSelection(selection[1],true);
        this.selectedRow = selection[1];
      }else if (Array.isArray(selection) && selection.length === 1){
        this.selectedRow = selection[0];
      }else {
        this.selectedRow = null;
      }
    },
  }
};
</script>```
相关推荐
让时光到此为止。29 分钟前
vue的首屏优化是怎么做的
前端·javascript·vue.js
San301 小时前
JavaScript 流程控制与数组操作全解析:从条件判断到数据高效处理
javascript·面试·代码规范
dengzhenyue1 小时前
矩形碰撞检测
开发语言·前端·javascript
Q_Q5110082851 小时前
python+springboot+uniapp基于微信小程序的停车场管理系统 弹窗提示和车牌识别
vue.js·spring boot·python·django·flask·uni-app·node.js
麦麦大数据2 小时前
D017 vue+django+neo4j音乐知识图谱推荐可视化分析系统|带管理员角色+爬虫
vue.js·数据分析·django·知识图谱·neo4j·推荐算法
前端伪大叔2 小时前
第13篇:🎯 如何精准控制买入卖出价格?entry/exit\_pricing 实战配置
javascript·python
麦当_2 小时前
ReAct 模式在 Neovate 中的应用
前端·javascript·架构
itslife2 小时前
vite源码 - 开始
前端·javascript
Achieve - 前端实验室2 小时前
【每日一面】React Hooks闭包陷阱
前端·javascript·react.js
Asort2 小时前
JavaScript设计模式(四)——建造者模式:优雅构建复杂对象的实用指南
前端·javascript·设计模式