wl vue select
1.0.0
ツリー ドロップダウン ボックスと、vue フレームワークのすべてが選択された通常のドロップダウン ボックス。
Vue フレームワークのツリー ドロップダウン ボックスと、すべてを選択した通常のドロップダウン ボックス。
このコンポーネントは、全選択ドロップダウン ボックスおよびツリー ドロップダウン ボックス機能を提供します。
wlVueSelectは、elementUi の el-select コンポーネントに基づく二次的なカプセル化されたドロップダウン ボックスで、全選択機能とデフォルトの選択機能を提供します。
wlTreeSelectは、elementUi の el-tree コンポーネントに基づくセカンダリのカプセル化されたドロップダウン ボックスで、ツリー データのサポートとデフォルトの選択機能を提供します。
これら 2 つのニーズは非常に一般的なため、別個のプラグインとしてリリースされています。
エルセレクト
0.4.8 ツリーのドロップダウンボックスで子ノードをすべて選択した場合、親ノードが解除できない問題を修正しました。
npm i wl-vue-select --save
または
npm i wl-vue-select -S
使用
import wl from "wl-vue-select";`
import "wl-vue-select/lib/wl-vue-select.css"
Vue.use(wl);
<wlVueSelect
v-model="value"
:props="props"
:data="data"
multiple
default-select
></wlVueSelect>
<p>----------分割线------------</p>
<wlTreeSelect
leaf
width="240"
checkbox
:data="treeData"
@change="hindleChanged"
v-model="selected"
></wlTreeSelect>
data() {
return {
value: [], // 选中值
data: [
{
id: 1,
name: "海边"
},
{
id: 2,
name: "森林"
},
{
id: 3,
name: "草原"
},
{
id: 4,
name: "古城"
}
], // 数据
props: {
label: "name",
value: "id"
}, // 配置
treeData: [
{
id: "love",
name: "所有和你走过的风光",
children: [
{
id: 1,
name: "海边",
children: [
{
id: 5,
name: "蓬莱",
}
]
},
{
id: 2,
name: "森林"
},
{
id: 3,
name: "草原"
},
{
id: 4,
name: "古城"
}
]
}
],
selected: [ "1" ]// 树下拉框选中数据
};
},
methods: {
hindleChanged(val){
console.log(val,2)
console.log(this.selected)
}
},
| シリアルナンバー | パラメータ | 説明する | タイプ | オプションの値 | デフォルト値 |
|---|---|---|---|---|---|
| 1 | データ | オプション オプションのリストデータ | 配列 | - | - |
| 2 | 小道具 | 設定項目: 名前を表示するラベル フィールドと値をバインドする値フィールド | 物体 | - | { ラベル: "ラベル"、値: "値" } |
| 3 | showTotal | 使用可能なオプションが複数ある場合は、全选」オプションを表示します。 | 番号 | - | 1 |
| 4 | デフォルト選択[廃止] | デフォルトの選択を有効にするかどうか。全部が有効な場合はすべてが選択され、すべてではない場合は最初の選択が選択されます。 (この機能を有効にする場合は、v-modelに初期値を代入しないでください) | ブール値 | - | 間違い |
| 5 | 他の | el-select によって提供されるその他のパラメータ | - | - | - |
| 6 | ノードキー | ツリー ドロップダウン ボックスを使用する場合は、キーを使用してデータを解析する必要があります | 弦 | - | ID |
| 7 | 選択済み[廃止] | ツリー ドロップダウン ボックスを使用する場合、選択したデータをバインドします (v-model に変更されました) | 文字列-数値-配列-オブジェクト | - | - |
| 8 | チェックボックス | ツリードロップダウンボックスを使用する場合、複数選択を有効にするかどうか | ブール値 | - | 間違い |
| 9 | 幅 | ツリードロップダウンボックスを使用する場合の幅、デフォルトの単位はpxです | 文字列番号 | - | 240 |
| 10 | 葉 | ツリーのドロップダウン ボックスで、リーフ ノードのみを選択できるかどうか | ブール値 | - | 間違い |
| 11 | トリガー | ツリー ドロップダウン ボックスを使用する場合、トリガー方法 | 弦 | クリック/フォーカス/ホバー/手動 | クリック |
| 12 | v モデル | 通常およびツリーのドロップダウン ボックスのバインド値は、通常のフォーム要素と同じように使用されます。 | 文字列-数値-配列-オブジェクト | - | - |
| 13 | 無効 | ドロップダウンボックスを無効にするかどうか | ブール値 | - | 間違い |
| 14 | ナラップ | 複数行の表示を禁止するかどうか。 true の場合、1 行のみが表示されます。 | ブール値 | - | 間違い |
| 15 | チェックなし閉じる | 複数選択した場合、すべての選択が解除されたときにオプションエリアを自動的に閉じるかどうか | ブール値 | - | 間違い |
| 16 | サイズ | サイズ、使い方はelementuiと同じ | 弦 | - | 中くらい |
| 17 | デフォルトすべて展開 | ツリー形式で、デフォルトですべてのオプションを展開するかどうか | ブール値 | - | 真実 |
| 18 | デフォルトのExpandedKeys | ツリー形状では、デフォルトでノードキーが展開されます。 | 配列 | - | - |
| 19 | フィルタリング可能 | 検索機能を有効にするかどうか（ツリードロップダウンボックスを追加する場合、通常のドロップダウンボックスと同じ機能になります） | ブール値 | - | 間違い |
| 20 | フィルターFNC | ツリー形状では、必要に応じて検索ロジックをカスタマイズできます。渡されない場合、検索はプロパティ内のラベルに対応するフィールドに基づいて行われます。関数(値,データ) | 関数 | - | - |
| 21 | 厳密にチェックしてください | ツリー状で親と子に関係がないかどうか | ブール値 | - | 間違い |
| 22 | ExpandOnClickNode | ツリー形状で、ノードをクリックすると拡大または縮小できるかどうか | ブール値 | - | 間違い |
| 23 | checkOnClickNode | ノードをクリックしたときにノードを選択するかどうか。デフォルト値は false です。つまり、ノードはチェック ボックスがクリックされた場合にのみ選択されます。 | ブール値 | - | 間違い |
| シリアルナンバー | 名前 | 説明する | パラメータ |
|---|---|---|---|
| 1 | 閉じるオプション | ツリードロップダウンボックスのオプション領域を閉じます | - |
0.5.8 ツリードロップダウンボックスに親子独立構成を追加
0.5.5 ツリー ドロップダウン ボックスの初期バインド値が単純な配列である場合の自動選択ロジック エラーを修正し、垂直方向のセンタリング スタイルを修正しました。
0.5.4 スクリプト導入機能を追加し、初期状態で全データを選択した場合、表示エリアに「すべて」が表示されずに各項目が一覧表示される問題を修正しました。
0.5.3 コンポーネント名を大きなこぶに調整し、オンデマンドの導入を追加します。
0.5.2 ツリーのドロップダウン ボックスを最適化し、検索機能とカスタム検索機能を追加しました。
0.5.1 ツリーのドロップダウン ボックスを最適化し、オプションが過剰な効果を表示する
0.5.0 ツリー ドロップダウン ボックス、defaultExpandAll、defaultExpandedKeys フィールドを追加しました
0.4.9 ツリードロップダウンボックスのオプション領域を閉じるための closeOptions メソッドを追加
0.4.8 ツリーのドロップダウンボックスで子ノードをすべて選択した場合、親ノードが解除できない問題を修正しました。
0.4.7 ツリー ドロップダウン ボックスを最適化し、el-select の折りたたみタグをサポートします。
0.4.6 ツリードロップダウンボックスを最適化し、サイズ属性を有効にします
0.4.5 ツリー ドロップダウン ボックスのプレースホルダーを最適化し、すべてが選択されていないときにオプションを閉じるパラメーター管理を追加しました。
0.4.2 ツリーのドロップダウン ボックスを最適化し、複数行のフィールドを禁止するかどうかを追加しました。
0.4.1 ツリーのドロップダウン ボックスを最適化し、無効なフィールドを追加します
0.3.9 渡された選択データが複雑な配列である場合、デフォルトで ID を抽出するようにツリー ドロップダウン ボックスを最適化します。
0.3.8 ツリードロップダウンボックスを複数選択した場合、表示領域のみがクリアされ、データが空の場合、ツリーチェックボックスがクリアされない問題を修正しました。
0.3.7 ツリーのドロップダウンボックスを選択する際に、葉のフィールドに応じて子ノードのみを選択するかどうかを変更します。
0.3.5 [バインド値が配列の場合] ツリードロップダウンボックスのラジオ選択におけるデフォルト選択の不具合を修正しました。
0.3.4 ツリー ドロップダウン ボックス el-tree のデフォルトの選択フィールドが空であり、getNodes メソッドで更新された rademe サンプルの最後の値も取得できる問題を修正しました。
0.3.3 ツリー ドロップダウン ボックスで複数選択が有効になっている場合の無限ループの問題を修正し、複数選択が有効な場合に葉ノードのみを返すかどうかを決定するために
leafフィールドを最適化しました。
0.3.2 ツリーのドロップダウンボックスが横に伸びた場合に表示されない問題を最適化
0.3.0 ツリードロップダウンボックスを最適化し、トリガー表示モードフィールドを追加
0.2.7 ツリーの単一選択を最適化する場合、ドロップダウン ボックスにオプションのレベルが追加され、
leafパラメータが追加され、ツリーの単一選択を最適化するときにリーフ ノードのみを選択できるかどうかを設定します。オブジェクト タイプがデフォルトで選択されている場合の効果
0.2.5 ツリー ドロップダウン ボックスのフィルタリング アルゴリズムを最適化し、利用可能なオプションが長すぎる場合にスクロール効果を高めるためにツリー ドロップダウン ボックスを最適化します。
0.2.4 showTotal がデータ長より大きい場合に空になる問題を修正しました。
0.2.3 更新された例
0.2.2 ツリーの追加ドロップダウン ボックス
0.1.2 アルゴリズムを更新。すべての選択から単一の選択に切り替えるときに、すべての選択オプションを手動でキャンセルする必要がありません。
0.1.0 が初めてリリースされ、全選択機能と el-select に基づくデフォルトの選択機能が追加されました。
