vue3中el-table 复选框设置为单选

vue3中el-table 复选框设置为单选

场景需求：el-table中自带的复选框组件，可以多选，但是目前我们只想要让用户选中一个，变成单选

代码实现

<template>
    <div>
        <el-table ref="myTable" :data="tableData" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import {ref} from 'vue'
const myTable = ref()
const handleSelectionChange = (val) => {
    // 这部分代码是让复选框设置为单选
    val.map( (row,index) => {
        if(val.length <=1 ){
            return
        }
        // toggleRowSelection 用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则可直接设置这一行选中与否
        myTable.value.toggleRowSelection(row,false)
        if(index === val.length-1){
            myTable.value.toggleRowSelection(row,true)
        }
    })
}
</script>

参考：https://element-plus.gitee.io/zh-CN/component/table.html