目次
ヒント: 面倒だと思うなら、概要だけ読んでください。
1. 問題点
el-table はテーブル編集のアイデアを実現します。
1. 編集可能なテーブルを作成するには、テーブル内の 1 つの列がドロップダウン ボックスです。実装方法は非常に簡単です。 el-table-column にドロップダウン ボックス el-select を挿入します (要素はスロットを提供します)。通常どおりに表示できます (他のコンポーネントやカスタム コンポーネントも自由に挿入できます)。正常に表示できます）
2. 追加および削除操作
1) 追加: フォームデータ tableData はレスポンシブとして記述されており、tableData にデータをプッシュするだけです
2) 削除: テーブル内の行をクリックすると、現在クリックされている行の elementen:scope.$index によって提供されるスロット データが取得されます。削除する場合は、tableData 内の添え字scope.$index を見つけて削除するだけです。
3. 実際、アイデアは非常に単純です。作成はほぼ完了し、テストしましたが、問題が発生するとは予想していませんでした @--@
特定の問題: el-table に多くの行が挿入され、ドロップダウン ボックスが配置されているセルで別の値が選択されます。次に、削除操作を実行します。1 ～ 3 行のデータは問題ありませんが、4 行以上になると問題があります。行を削除するためにクリックしましたが、その行のドロップダウン ボックスで元々選択されていた値が削除されます。この行に隣接するデータは失われていますが、ドロップダウン項目には対応する値があり、スタイルも選択したスタイルです。選択したスタイルを持つドロップダウン データを再度選択しても、まだ入力できません。 el-selectの入力ボックス、他の値を選択しても問題なく、普通に入力できます！！！！具体的な状況を以下の図 1-1 に示します。
2. 理由と解決策
1.. el-select でバインドされた値を html で表示し、el-select でバインドされた値に value があることを確認します。とんでもない、このままでは終わらない。
2. ドロップダウン ボックスは私が書いたものではなく、他の人がパッケージ化したものなので、他の人のパッケージの問題だと思い、element が提供する el-select に置き換えました。1 と 2 の操作を繰り返します。 3でも表示されましたが、ドロップダウン項目には対応する値があり、ドロップダウンボックスで選択した値は消えていますが、今度は選択したスタイルのドロップダウンデータを選択すると、入力がel-select のボックスは正常に入力できます。(確かにそのコンポーネントには問題がありますが、それはこの議論の焦点ではありません)
3. 私が書いた削除方法を確認します: ああ、また間違えました。配列を削除するときに、最初の配列の添字に従ってデータを検索しました。言葉にならないほど、この間違いは実際に少なくとも3回犯されています。それがこの問題の原因ではありませんが（1行しか削除していないので完全に削除できますし、複数行の削除方法は致命的です）、削除問題の原因でもあります。次回は失敗しないことを願っています。
4. devtools の Vue プラグインを使用して確認します。図 2-1 に示すように、el-input の値には実際には @****@がありません。
5. データの一部を削除すると、他のデータに影響が出るのはなぜですか? ドロップダウン ボックスが配置されているセルにのみ問題があるのはなぜですか 神様、もしあなたが理解できないなら、それはとんでもないことです！！！残業時間外@—@
6. 1 時間以上落ち込んでいました。最後に、前回いくつかのデータを確認したところ、実際にはel-tableの全選択ボタンが選択されていました。el-table がどのデータがどれであるかを区別できないので、誰を削除するかは、不明瞭で混乱していると考えられます。
7. 推測は正しかったので、図 2-2 に示すように、各データに一意の行キーを付ければ、問題はありません。！！！！！
とんでもないことだ。行キーが必須であること、および el-table データ内の各データに対応する行キーが一意であることを確認するには、el-table を使用するのが最善です。そうしないと、さまざまなとんでもないエラーが発生する可能性があります。！！
3. まとめ
1.編集可能なテーブルのアイデア:
1) 編集可能なコンポーネント (ドロップダウン ボックス、入力ボックスなど) を el-table-column に挿入します (要素はスロットを提供します)。
2) 追加および削除操作
a. 増加: フォーム データ tableData は応答型として書き込まれ、tableData にデータをプッシュするだけです
b. 削除: テーブルの行をクリックすると、elementen: 現在クリックされている行のscope.$indexによって提供されるスロット データを取得します; 削除する場合は、tableData内の添え字scope.$indexを直接見つけて削除します。
2. el-table の削除時に削除されなかった行が、削除された行の影響を受ける理由:
1) 削除ロジックが正しいかどうかを確認します。特にバッチで削除する場合は、削除する配列内で元の添字を探しながら削除しないでください。削除できなくなります。一時変数を使用して、削除できない項目を保存します。削除する必要がある場合は、それを tableData に割り当てるだけです。
2)データの各行に一意の識別フィールド rowKey を追加して el-table (:row-key="rowKey") に割り当てているかどうかを確認すると、削除時に各データを判断できます。配列の添字として設定するなど、手動で設定できます (rowKey が「id」の場合、各データに element.id=elementIndex を追加します)。
3. el-table を使用する場合、行キーが必須であること、および el-table データ内の各データに対応する行キーが一意であることを確認することが最善です。そうしないと、さまざまなとんでもない問題が発生する可能性があります。エラー。
1) テーブルの最上隅にある半選択されたスタイルは無効です。詳細については、el-table が部分的に選択されている場合、完全に選択されているスタイルが表示され、class:is-indeterminate が失われ、solution_Qinqing のスタイルが表示されます。ブログ-CSDN ブログ
2) テーブルの行を削除すると、他の行のデータに影響します: この記事
4. 毎日穴を踏んで、穴を食べて知恵を得て、すくすくと成長してください&&**&&
/*
お役に立てば幸いです!
間違いがある場合は、修正していただければ幸いです。ありがとうございました。
*/