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

问题:

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

代码:

<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>```

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值