Vue——vue3+element plus实现多选表格使用ajax发送id数组

代码来源:

Vue 3结合element plus（问题总结二）之 table组件实现多选和清除选中（在vue3中获取ref 的Dom）_multipletableref.value.togglerowselection()打印出来的是u_子时不睡的博客-CSDN博客

前言

为了实现批量删除功能的功能需要用到多选表格，自己用vue实现很麻烦，遂上上网查找.

终于找到了上面的文章。

实现结果图

如下一个是前端的图，一个是后端的图，点击批量删除之后就可以看见三个元素的id被发送到后端了。虽然前端页面还是没有变，不过实际已经算是删除了。要刷新页面可以在success回调方法中再获取一次列表数据。

代码实现

实现思路

按照原文博主说的，因为这个表格代码原本是用ts写的，有两个方法用ts时可以找到，用js里面找不到，原因是vue3获取ref绑定的dom元素失败，并且好像也不能在onMounted钩子函数里面获取到(没试过)。然后直接在setup或是onMounted里面使用了getCurrentInstance()获取了整个vue组件的实例。

然后在实例的refs上发现了表格绑定的那一个dom元素的代理对象，获取到了这个dom元素的代理响应式对象。

在该实例的refs区域可以看见有表格的dom元素绑定的ref变量的代理对象

Vue3 学习笔记 —— toRefs_...torefs_tanleiDD的博客-CSDN博客看这个toRefs方法

 这里如果不使用teRefs转的话就有如下，说它不是方法，也就是使用代理对象没法使用里面的方法

用了toRefs它就说收到一个普通对象？什么傻逼玩意真有它的.

 

然后使用toRefs方法_将表格的代理对象转换转换为普通对象，普通对象里面属性都变成了ref的,然后可以看见里面有需要的两个方法。

下图是直接表格的代理对象转换为普通对象后找到的两个方法结果

 

前端控制台输出

后端代码

    @PostMapping("/posts/add2")
    public String add2post(@RequestBody Content content){
        for(int i=0;i

前端代码