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>```
相关推荐
一只一只妖2 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟4 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶5 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
LFly_ice6 小时前
学习React-9-useSyncExternalStore
javascript·学习·react.js
gnip6 小时前
js上下文
前端·javascript
中草药z6 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
世伟爱吗喽7 小时前
threejs入门学习日记
前端·javascript·three.js
F2E_Zhangmo7 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
小浣熊喜欢揍臭臭8 小时前
react+umi项目如何添加electron的功能
javascript·electron·react
乖女子@@@8 小时前
React笔记_组件之间进行数据传递
javascript·笔记·react.js