elementPlus——多选表格变单选

• 选中数据回显
• 单选时，清除上一次选中的
• 清除所有选中的
• 隐藏全选按钮 table外边加一个div标签，否则不起作用
• 点击提交打印选中的

<template>
  <div>
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @select="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>
  </div>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection()">Clear </el-button>
    <el-button @click="submit()">提交 </el-button>
  </div>
</template>

<script   setup>
import {
    
     ElTable } from 'element-plus'
import {
    
     onMounted } from 'vue';

// 数据会选
onMounted(() => {
    
    
  // 适用于单选
  // let row = tableData.filter((row) => row.date == '2016-05-04')
  // multipleTableRef.value.toggleRowSelection(row, true);
  // 适用于单选和多选
  tableData.forEach((row) => {
    
    
    if (row.date == '2016-05-04') {
    
    
      multipleTableRef.value.toggleRowSelection(row, true);
    }
  })
})

const multipleTableRef = ref()
const multipleSelection = ref([])
// 清空所有选中的
const toggleSelection = (rows) => {
    
    
  multipleTableRef.value.clearSelection()
}
const handleSelectionChange = (val) => {
    
    
  multipleSelection.value = val
}
// 控制单选——table选择项发生变化时
const selectClick = (selection, row) => {
    
    
  if (selection.length > 1) {
    
    
    let del_row = selection.shift();
    multipleTableRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
  }
}

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 submit = () => {
    
    
  console.log(1111, multipleSelection)
}
</script>
<style scoped lang='scss'>
// 隐藏全选按钮
::v-deep .el-table th.el-table__cell:nth-child(1) .cell {
    
    
  visibility: hidden;
}
</style>