Element-plus表格实现单选

一、效果图

 二、代码

<template>
<div>
  <el-table  ref="multipleTableRef" @select="handlerSelect" 
      :data="tableData"  
      @selection-change="handleSelectionChange"
      @row-click="rowClickHandle" highlight-current-row>
    <el-table-column type="selection" width="55" />
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</div>
</template>

<script setup>
import { reactive,ref, toRefs } from "vue"
const multipleTableRef = ref()
const data = reactive({
  selectCheckList:[],
  tableData:[
  {
    id:1,
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:2,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:3,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  ]
})
const {tableData} = toRefs(data)
// 表格某一行的单击事件
function rowClickHandle(row) {
  const selectData = data.selectCheckList
  multipleTableRef.value.clearSelection()
  // if( selectData.length == 1 ) {
  //       selectData.forEach(item => {
  //           // 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
  //           if (item == row) {
  //             multipleTableRef.value.toggleRowSelection(row, false);
  //           }
  //           // 不然就让当前的一行勾选
  //           else {
  //             multipleTableRef.value.toggleRowSelection(row, true);
  //           }
  //       })
  //   } 
  //   else {
  //     multipleTableRef.value.toggleRowSelection(row, true);
  //   }
  if (selectData.length == 1) {
        const [item] = selectData;
        const shouldSelect = item !== row;
        multipleTableRef.value.toggleRowSelection(row, shouldSelect);
  } else {
      multipleTableRef.value.toggleRowSelection(row, true);
  }
}
// 当用户手动勾选数据行的 Checkbox 时触发的事件
function handlerSelect(selection, row) {
  // 清除 所有勾选项
  multipleTableRef.value.clearSelection()
  if(selection.length == 0) return
  multipleTableRef.value.toggleRowSelection(row,true)
}
// 当选择项发生变化时会触发该事件
function handleSelectionChange(val) {
  console.log('表格的选中 可以获得当前选中的数据',val);
  data.selectCheckList = val
}

</script>

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