Vue3 は Element Plus el-table を使用して選択された項目をクリアします

機能目標: データ送信後に自動的にチェックを外す

el-table は、選択された複数のオプションをすぐにクリアできません。具体的なコードは次のとおりです。

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

---

 関数図の例は次のとおりです。

解決：

el-table 自体は、ワンクリックで選択項目をクリアする操作を提供しています 詳細は element の公式 Web サイトを参照してください、実際に使用できる API があることがわかります: 複数選択テーブルには、clearSelection が使用されますユーザーの選択をクリアします。

要素 ui plus で利用可能な API を次の図に示します。

 具体的な実装例は以下の通りです。

 テーブルインスタンスに ref を追加します。ここでは myTable として定義します。自由に定義できます。

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

 印刷すると、プロキシ インスタンスに実際に clearSelection メソッドがあることがわかります。

 次に、特定の方法で目標を達成し、フォームの送信後に選択した項目をクリアできます。

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

注: vue3 を使用しているため、事前にセットアップで getCurrentInstance の現在のコンポーネント インスタンスを導入する必要があります。

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