最初のレンダリング
最初に難しさについて話させてください
- cssレベルのスタイルを表示するために使用するプラグインがわかりません
- リストはJSonです
- 要素チェックボックスのバインドされた値は、通常の配列のみにすることができます（オブジェクトはバインドできますが、エコーすることはできません）
- ドラッグ後に複数選択ボックスにバインドされるデータの順序に影響を与える方法
アイデア
- まず、JSonリストデータalldataの全量を準備します。
例：[{label： 'student name'、val： 'studentname'} ...] - デフォルトでヘッダーを表示するJSonデータnowdata（つまり、現在表示されているヘッダー）を準備します
- これら2つをブレットウィンドウに渡します。ブレットウィンドウは現在表示されているヘッダーnowdataを監視し、map（）を使用して通常の配列を転送します。
- この通常の配列はチェックボックスにバインドされており、デフォルトでチェックされます
- チェックボックスオプションはalldataから取得されます（実際にはcopydata、見てみましょう）
- プラグインを導入すると、プラグインはJsonにバインドされ、ドラッグ後にJson内のオブジェクトの順序を変更できます（プラグインの機能）
- propsの値を直接変更することはできないため、alldataのコピーをコピーします-----> copyalldata
- プラグインはcopyalldataをバインドし、copyalldataを監視します。オプションが変更されると、map（）は通常の配列に変換され、arryに割り当てられます。
- [OK]をクリックして、arryをJsonに転送し、nowdataを上書きします
- v- for nowdataは、テーブルヘッダーをトラバースします<el-table-column
- 多くのことを確認した後、[キャンセル]をクリックして元の状態に復元し、バックアップすることを忘れないでください
とても面倒で、やるのも面倒です。最初は、このコンポーネントもシンプルに感じられることを知っていましたが、それでも少しテストです。
キーコード
npmは、
data（）{return}でドラッグを宣言する必要なしに、ドラッグ可能なプラグインを導入して使用します。
import draggable from 'vuedraggable'
<el-checkbox-group v-model="arry">
<draggable v-model="copydata" :options="{group: 'label'}" @start="drag=true" @end="drag=false">
<el-col :span="20" v-for="x in copydata" :key="x.val">
<!-- 不支持绑定对象 -->
<el-checkbox :label="x.val" >{
{
x.label}}</el-checkbox>
</el-col>
</draggable>
</el-checkbox-group>
Jsonから通常の配列へ
私の複数選択ボックスは、モニターで使用されるヘッダーのフィールド名にバインドされています
this.arry= newVal.map(item => item.val)
JSonへの配列、クリックして確認してトリガー
let newnowdata=[]
this.alldata.foreach(el=>{
if(this.arry.includes(el.val)
newnowdata.push(el)
}