Vue3 ElementPlus Table表格实现单选

参考链接: https://blog.csdn.net/weixin_44640323/article/details/120510400

效果展示：

说明：代码使用vue3+ts+elementplus中的table组件完成

利用elementplus table中的@selection-change方法，设置单选。并用css隐藏全选按钮。

完整代码如下：：

<template>
    <!-- 注意要包一层div根元素，否则css样式可能会不生效，原因不详 -->
    <div>
        <el-table ref="taskTableRef" :data="tableData" style="width: 100%" @select="selectClick">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="元气少女缘结神" />
        </el-table>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, toRefs } from 'vue'
const taskTableRef = ref(); // 表格ref

// 变量定义
const state = reactive({
    tableData: [{
        name: '巴卫'
    },
    {
        name: '奈奈生'
    },
    {
        name: '电灯泡'
    }],
});

// 主要方法
// table选择项发生变化时会触发该事件
const selectClick = (selection: any, row: any) => {
    if (selection.length > 1) {
        let del_row = selection.shift();
        taskTableRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
    }
}

const { tableData } = {
    ...toRefs(state),
};

</script>

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