Vue3 ElementPlus 实现Table组件表格单选效果

首先，我们要先来了解下所用到的组件方法：

 

在Vue项目中使用Element Plus的table组件时,我们可以设置type="selection"来实现选择行。默认是多选,如果我们需要单选,那么就需要进行一些操作了。

话不多说，直接上代码

vue代码：

 <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @select="select" @row-click="selectClick"  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column label="Date" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="name" label="Name" width="120" />
          <el-table-column property="address" label="Address" show-overflow-tooltip />
        </el-table>

js代码

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },

]
const multipleTableRef = ref()
const multipleSelection = ref([]) 
const handleSelectionChange = (val) => { 
  multipleSelection.value = val 
}
const select = (selection, row)=> {
  
	// 清除 所有勾选项
	multipleTableRef.value.clearSelection() 
	// 当表格数据都没有被勾选的时候 就返回
	// 主要用于将当前勾选的表格状态清除
	if(selection.length == 0) return  
	multipleTableRef.value.toggleRowSelection(row, true); 
  
}

// 控制单选——table选择项发生变化时
const selectClick = (row) => {
  const selectData = multipleSelection.value
  multipleTableRef.value.clearSelection() 
  if (selectData.length == 1) {
    console.log("有值时");
    
    selectData.forEach(item => {

      // 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
      if (item == row) {
        multipleTableRef.value.toggleRowSelection(row, false);
      }
      // 不然就让当前的一行勾选
      else {
        multipleTableRef.value.toggleRowSelection(row, true);
      }
    })
  }
  else {
    
    multipleTableRef.value.toggleRowSelection(row, true);
  } 
}