Vue3 uses Element Plus el-table to clear selected items

Functional goal: Automatically uncheck after submitting data

el-table cannot quickly clear the selected multiple options, the specific code is as follows:

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

---

 An example function diagram is as follows:

solution:

The el-table itself provides the operation of clearing the selected items with one click. For details, you can check the official website of element, and you can see that there is indeed an API available: clearSelection is used for multi-selection tables to clear the user's selection.

The available APIs of element ui plus are shown in the figure below:

 The specific implementation example is as follows:

 Add ref to the table instance, here I define it as myTable, you can define it freely

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

 By printing, you can see that there is indeed a clearSelection method in the proxy instance

 Next, you can achieve the goal in the specific method and clear the selected items after submitting the form:

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

Note: Because you are using vue3, you need to introduce the current component instance of getCurrentInstance in the setup in advance

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