Vue 3 Element Plus Table组件实现多选和清除选中

<template >
  <div id="shoplist">  
 <el-table
    ref="multipleTableRef"
    :data="data.arr"
    style="width: 100%"
    height="90%"
    stripe
    @selection-change="handleSelectionChange"
  > 
     <el-table-column type="selection" width="40" /> 
     <el-table-column property="shopname" label="店名" width="120" show-overflow-tooltip/>
    <el-table-column property="score" label="评分" sortable width="80" />
     <el-table-column property="sales" label="销量" sortable width="80" />
      <el-table-column property="type" label="类型" width="70" /> 
    
   </el-table>

  <div style="margin-top: 20px; margin-left:20px">
    <el-button @click="toggleSelection(data.arr)">全选</el-button>
    <el-button @click="toggleSelection()">清除</el-button>
  </div>
  </div>
</template>

<script>
import { onMounted, ref, watch } from 'vue' ;
import { getCurrentInstance } from 'vue'
import {ElTable} from 'element-plus'
import { reactive, toRaw, toRefs } from '@vue/reactivity';
export default {
  setup () {
   const  instance = getCurrentInstance();
    const multipleTableRef = ref(null);
    const multipleSelection  = ref([]);
    var toggleSelection =(rows)=>{
       var ultipleTabInstance = toRefs(instance.refs.multipleTableRef)
       console.log(ultipleTabInstance.toggleRowSelection);
        if(rows){
          rows.forEach(row => {
           ultipleTabInstance.toggleRowSelection.value(row, undefined)
          });
        }else{
          ultipleTabInstance.clearSelection.value()
        }
      }
    onMounted(()=>{
      // console.log(multipleTableRef);
     
    })
    var handleSelectionChange =(val)=>{
     
      multipleSelection.value = val;
      
    }
   
   
   var data = reactive({
     arr:[ {
          id:1,
          shopname:"沙县小吃",
          score:5.5,
          sales:1200,
          hh:12,
          type:"快餐"
        },
      {
          id:2,
          shopname:"法式牛排餐厅",
          score:7.5,
          sales:2400,
          hh:12,
          type:"西餐"
        },
        {
          id:3,
          shopname:"沙县大吃",
          score:6.5,
          sales:200,
          hh:12,
          type:"快餐"
        },
        {
          id:4,
          shopname:"南昌瓦罐汤",
          score:6.9,
          sales:2400,
          hh:12,
          type:"快餐"
        },
      ]    
   })
  
    return {
      data,
      multipleTableRef,
     toggleSelection,
     handleSelectionChange,
    }
  },
}
</script>

<style>
 #shoplist{
      position: fixed;
      z-index: 1001;
      width: 390px;
      height: 100%;
      min-height: 100vh;
      right: 0px;
      bottom: 0px;
      padding-top: 5px;
      background-color: #f2f2f2;
      transition: 1s;
      /* overflow: hidden; */
      border: 1px solid #333;
  }
</style>