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>

场景需求二：

可以通过选择行选中el-table复选框

<template>
    <div>
        <el-table ref="myTable" :data="tableData" @row-click="handleRowClick">
                <el-table-column type="selection" width="55"></el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import {ref} from 'vue'
const myTable=ref()
const handleRowClick = (row, column, event) => {
// 通过event.target.tagName判断点击的是不是td元素
//if (event.target.tagName.toLowerCase() === 'td') {
// 使用toggleRowSelection方法切换选中状态
myTable.value.toggleRowSelection(row);
//}
};
</script>