vue3element如何通过表格外的按钮来控制表格内部的所有状态全选全不选

想要在vue3ui框架的表格外部来控制表格内部的所有状态的话，需要获取到表格的实例来进行控制。vue3如何获取表单的实例呢？

<template>
    <div>
        <el-table ref="multipleTableRef" :data="state.carlist" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="商品名称" />
            <el-table-column prop="dic" label="商品描述" />
            <el-table-column prop="price" label="商品价格" />
            <el-table-column prop="" label="商品小计">
                <template #default="scope">{{ scope.row.price * scope.row.num }}￥</template>
            </el-table-column>
            <el-table-column label="Date" lable="购买数量">
                <template #default="scope">
                    <el-input-number style="width: 150px;" v-model="scope.row.num" :min="1" :max="10" />
                </template>
            </el-table-column>
        </el-table>
        <p>
            <span>
                <input type="checkbox" v-model="state.allflag" @click="all">
                全选
            </span>
            <span>总价：{{ getters.num.price }}</span>
            <span>总数：{{ getters.num.num }}</span>
            <el-button type="danger" @click="commit('delok')">删除选中</el-button>
        </p>
    </div>
</template>

<script setup >
import { useStore } from 'vuex';
import { ref } from 'vue';
const { state, commit, getters } = useStore()
const multipleTableRef = ref()

//选中的
const handleSelectionChange = (val) => {
    commit('oklist', val)
}
const all = () => {
    multipleTableRef.value.toggleAllSelection()

}
</script>

 上面表格绑定的ref就是你下面定义的也就是这个表格的实例

ref="multipleTableRef"

const multipleTableRef = ref()

如果在表格外部切换表格内部的所有状态的话需要配合表格的toggleAllSelection事件来进行全选全不选，代码如下

      //html片段
      <el-button type="danger" @click="commit('delok')">删除选中</el-button>

//js片段
const all = () => {
    multipleTableRef.value.toggleAllSelection()

}

这样就可以在表格外部来实现表格内部的全选全不选的状态切换了