Vue3 ElementPlus Table表格实现单选

<template>
    <!-- 注意要包一层div根元素，否则css样式可能会不生效 -->
    <div>
       

         <el-table v-loading="loading" ref="taskTableRef" :data="projectList"  @select="selectClick">

            <el-table-column type="selection" width="55" align="center" />
           <el-table-column label="项目编号" align="center" prop="projectNum" />
        </el-table>
    </div>
</template>
 
<script setup lang='ts'>
import { ref, reactive, toRefs } from 'vue'
const taskTableRef = ref(); // 表格ref
 
// 变量定义

//表格数据
const projectList = ref([]);
 
// 主要方法

// table选择项发生变化时会触发该事件

const selectClick = (selection,row) => {

  projectIds.value = row.projectId;

    if (selection.length > 1) {

        let del_row = selection.shift();

        taskTableRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）

    }

}

 
 
</script>
 
<style scoped lang='scss'>
// 隐藏全选按钮
:deep(.el-table th.el-table__cell:nth-child(1) .cell) {
    visibility: hidden;
}
</style>