vue3 使用 Element Plus el-table 清除选项

功能目标：提交数据后自动取消勾选

el-table无法快捷清除选中多选项，具体代码如下：

1.  
   <el-table v-loading="loading" :data="detailsList" @selection-change="handleSelectionChange">
2.  
   <el-table-column type="selection" width="55" align="center" />
3.  
   ......
4.  
   </el-table>

 示例功能图如下:

解决方案：

el-table本身提供可一键清空选中项的操作，具体可查看element官网，可以看到确实有可供使用的api：clearSelection用于多选表格，清空用户的选择。

element ui plus 可供使用的api如下图所示：

 具体实现示例如下：

 给table实例添加ref，此处我定义为myTable，可随意定义

1.  
   <el-table v-loading="loading" :data="detailsList" @selection-change="handleSelectionChange" ref="myTable">
2.  
   <el-table-column type="selection" width="55" align="center" />
3.  
   ......
4.  
   </el-table>

 通过打印可以看到proxy实例中确实有clearSelection方法

 接下来就可以在具体方法中实现目标提交表单后清空选中项：

1.  
   /* 批量更新提交 */
2.  
   function batchsubmit(){
3.  
   dialogFormVisible.value = false
4.  
   batchUpdate({...refreshdata.value,modelDetailsIds:ids.value}).then((response) => {
5.  
   proxy.$modal.msgSuccess("修改成功");
6.  
   refreshdata.value = {};
7.  
   proxy.$refs.myTable.clearSelection()
8.  
   })
9.  
   }

注意：因为用的是vue3需提前在setup中引入getCurrentInstance当前组件实例

1.  
   <script setup name="Details">
2.  
    const { proxy } = getCurrentInstance();
3.  
   </script>

这篇好文章是转载于：学新通技术网