要件:フロントエンドの日常開発において、テーブルの操作欄について、ボタンをクリックした際にプロンプトボックスが表示され、誤ってタッチしたり再確認(削除など)をしないように注意を促すケースがよくあります。これは、el-popover がよく使われます。
問題: しかし、el-popover はこの v-model 双方向バインディングを使用する必要がありますが、公式ドキュメントの例に従って el-table に el-popover を直接記述すると、正常に表示できないプロンプト ボックスが表示されます。私の理解は双方向の拘束力があるはずですが、矛盾があるはずです。
解決策: ref を el-popover に動的にバインドする
コード:
html:
js:
これはel-popoverのOKボタン機能です。キャンセルも同様です。
以下の図に示すように、elementui テーブルの各行操作で el-popover の通常の表示を実現できます。