Element UI 默认的 el-table 多选框改造成只能单选的形式

Element UI 默认的 el-table 多选框改造成只能单选的形式

文章目录

一、实现

要将 Element UI 默认的 el-table 多选框（type=“selection”）改造成只能单选的形式，可以通过以下方法实现：

仍使用多选的type=“selection”：但是在选择事件中控制用户的选择行为，确保只能选中一行。
手动清除其他选中行：当用户选择一个新行时，清除之前选中的行，达到单选效果。

<template><div><el-table
      ref="singleSelectTable":data="tableData"
      @selection-change="handleSelectionChange"
      border
      style="width: 100%"><!-- 使用 type="selection" 多选，但我们会手动改造成单选 --><el-table-column
        type="selection"
        width="55"></el-table-column><el-table-column
        prop="date"
        label="日期"
        width="180"></el-table-column><el-table-column
        prop="name"
        label="姓名"
        width="180"></el-table-column></el-table><div style="margin-top: 20px"><el-button @click="submit">提交选择</el-button></div></div></template><script>exportdefault{data(){return{
      tableData:[{ date:'2024-10-01', name:'Tom'},{ date:'2024-10-02', name:'Jerry'},{ date:'2024-10-03', name:'Spike'},],
      selectedRow:[],// 保存选中的行，注意使用数组形式};},
  methods:{handleSelectionChange(selection){// 只允许选择一个行，清除其他选择if(selection.length >1){this.$refs.singleSelectTable.clearSelection();// 清空所有选择this.$refs.singleSelectTable.toggleRowSelection(selection[selection.length -1],true);// 重新选中最后一个this.selectedRow =[selection[selection.length -1]];// 更新选中的行}else{this.selectedRow = selection;}},submit(){if(this.selectedRow.length >0){
        console.log('当前选中的行数据:',this.selectedRow[0]);// 单选，输出第一项即可}else{
        console.log('未选择任何行');}}}};</script>