场景需求一：

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

javascript"><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复选框

javascript"><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>