- 複数選択
🧬 コンポーネントを組み立てます
複数選択
Contribute複数選択
マルチセレクトコンポーネントは、リストから複数のオプションを選択する必要がある場合に便利です。 これにより、より効率的なデータ入力とフィルタリングが可能になります。 このコンポーネントは、さまざまなエフェクトを実現するために、さまざまなプロパティで構成することができます。また、メソッドとイベントハンドラをサポートして、よりカスタマイズできます。
データソースから手動または一括でオプションを追加できます。 この記事では、マルチセレクトコンポーネントの使用方法を詳しく紹介します。 この記事では、マルチセレクトコンポーネントの使用方法を詳しく紹介します。
プロパティー
手動オプション
新しいオプションを追加するか、手動でオプションを削除し、オプションを1つずつ設定します。 オプションのプロパティは以下のとおりです。 オプションのプロパティは以下のとおりです。 オプションのプロパティは以下のとおりです。 オプションのプロパティは以下のとおりです。 オプションのプロパティは以下のとおりです。 オプションのプロパティは以下のとおりです。
| プロパティー | 説明 |
|---|---|
| ラベル | オプションに表示されるテキスト |
| 値 | オプションに関連付けられている値 |
| 無効 | 選択オプションが無効になっているかどうか |
マップされたオプション
label と value プロパティを対応するデータフィールドにマッピングすることで、データソースからオプションを追加することもできます。 このようにして、データベースから動的にオプションを取得できます。 この記事の最後に、例を通してそれを使用する方法を紹介します。 このようにして、データベースから動的にオプションを取得できます。 この記事の最後に、例を通してそれを使用する方法を紹介します。 このようにして、データベースから動的にオプションを取得できます。 この記事の最後に、例を通してそれを使用する方法を紹介します。 このようにして、データベースから動的にオプションを取得できます。 この記事の最後に、例を通してそれを使用する方法を紹介します。 このようにして、データベースから動的にオプションを取得できます。 この記事の最後に、例を通してそれを使用する方法を紹介します。 このようにして、データベースから動的にオプションを取得できます。 この記事の最後に、例を通してそれを使用する方法を紹介します。 このようにして、データベースから動的にオプションを取得できます。 この記事の最後に、例を通してそれを使用する方法を紹介します。
| プロパティー | 説明 |
|---|---|
| データソース | オプションのデータソースを設定 |
| ラベル | {{item}} を使用してオプションのラベルを設定 |
| 値 | {{item}} を使用してオプションの値を設定します |
| 無効 | 選択オプションが無効になっているかどうかを設定するには {{item}} を使用します |
その他のプロパティ
| プロパティー | 説明 |
|---|---|
| 既定値 | コンポーネントの初期値。 コンポーネントの初期値。 コンポーネントの初期値。 コンポーネントの初期値。 コンポーネントの初期値。 コンポーネントの初期値。 コンポーネントの初期値。 コンポーネントの初期値。 {{}}}にJavaScriptを入力すると、初期値を動的に変更することができます。 |
| プレースホルダー | 値は入力フィールドが空の場合に表示されます。 |
| ラベル | ユーザーに表示されるフィールドの名前 |
| 図表番号 | フィールドを詳細に説明するために使用されるキャプションです。 |
| 非表示ラベル | ラベルを表示するかどうかを設定します |
| 位置 | コンポーネントに対する相対的なラベルの位置を設定します |
| 配置 | ラベルの配置を設定 |
| Width | ラベルがコンポーネントの左側にある場合、ラベルの幅比率を設定します |
| イベントハンドラー | トリガクエリ、コンポーネントのイベントに応じてコンポーネントを制御したり、他のAPIを呼び出したりします。 |
| 無効 | コンポーネントが無効化されているかどうかのステータスを制御します。 コンポーネントが無効化されているかどうかのステータスを制御します。 無効になっている場合、コンポーネントを変更したりフォーカスしたりすることはできません。 コンポーネントが無効化されているかどうかのステータスを制御します。 コンポーネントが無効化されているかどうかのステータスを制御します。 無効になっている場合、コンポーネントを変更したりフォーカスしたりすることはできません。 コンポーネントが無効化されているかどうかのステータスを制御します。 無効になっている場合、コンポーネントを変更したりフォーカスしたりすることはできません。 |
| 読み取り専用 | コンポーネントが読み取り専用かどうかのステータスを制御します。 コンポーネントが読み取り専用かどうかのステータスを制御します。 読み取り専用コンポーネントを選択してフォーカスできますが、変更することはできません。 コンポーネントが読み取り専用かどうかのステータスを制御します。 読み取り専用コンポーネントを選択してフォーカスできますが、変更することはできません。 |
| クリアボタンを表示 | クリアボタンを表示するかどうかを設定します |
| ツールチップ | ユーザはコンポーネントツールチップを入力できます。 ツールチップがフォーカスされると表示されます。 Markdown 形式がサポートされています。 ツールチップがフォーカスされると表示されます。 Markdown 形式がサポートされています。 |
| 必須項目 | スイッチがオンの場合のみ有効です。 |
| 少なくとも選択 | 選択するオプションの最小数を設定します |
| 選択範囲: | 選択するオプションの最大数を設定します |
| カスタムルール | editor.inspect.setter_tooltip.custom_rule |
| 検証メッセージを隠す | 入力値が正しくない場合は非表示の状態を切り替えることでエラーメッセージを非表示にできます。 非表示状態はJavaScriptで動的に変更できます。 非表示状態はJavaScriptで動的に変更できます。 非表示状態はJavaScriptで動的に変更できます。 非表示状態はJavaScriptで動的に変更できます。 非表示状態はJavaScriptで動的に変更できます。 非表示状態はJavaScriptで動的に変更できます。 非表示状態はJavaScriptで動的に変更できます。 非表示状態はJavaScriptで動的に変更できます。 |
| フォームデータキー | data 属性を構築する際に、ラッピングフォームコンポーネントのキーを指定します。 |
| 高さ | 合うように高さを設定する方法 |
| Hidden | コンポーネントが非表示になるかどうかを動的に制御します。 動的ブール値を使用して非表示状態を変更できます。 動的ブール値を使用して非表示状態を変更できます。 |
| テーマの色 | コンポーネントのテーマカラーを選択する |
方法
他のコンポーネントを使用してコンポーネントを制御できます。 以下の3つの方法をサポートします。 以下の3つの方法をサポートします。 以下の3つの方法をサポートします。 以下の3つの方法をサポートします。 以下の3つの方法をサポートします。 以下の3つの方法をサポートします。 以下の3つの方法をサポートします。 以下の3つの方法をサポートします。
setValue
選択したオプションを設定するには、例えば{{[”value1”,”value3”…]}}
| プロパティー | 説明 |
|---|---|
| 値 | 選択したオプション値の配列。 |
clearValue
選択したオプションをクリアするには
validate
入力情報が合法であることを確認するには
clearValidate
検証メッセージを消去するには
イベントハンドラ：
マルチセレクトコンポーネントの onChange イベントのリスニングをサポートしています。
データ
マルチセレクトコンポーネントには、アプリ内で {{componentName.propertyName}} を介して呼び出すことができる一般的に使用されるデータがいくつかあります。
| プロパティ名 | 説明 |
|---|---|
| 値 | 選択したオプション値の配列 |
大文字小文字を区別する
次に、マップされたモードを使用してオプションを動的に取得する方法を示します。
ステップ 1 アクションを追加
options_en、options.jp、options_zh、options_kr、valueの5つの列を含むselectionという名前のテーブルを作成しました。 オプションの値は value に保存され、他の列の異なる言語のオプションラベルに保存されました。 options_en、options.jp、options_zh、options_kr、valueの5つの列を含むselectionという名前のテーブルを作成しました。 オプションの値は value に保存され、他の列の異なる言語のオプションラベルに保存されました。 options_en、options.jp、options_zh、options_kr、valueの5つの列を含むselectionという名前のテーブルを作成しました。 オプションの値は value に保存され、他の列の異なる言語のオプションラベルに保存されました。 options_en、options.jp、options_zh、options_kr、valueの5つの列を含むselectionという名前のテーブルを作成しました。 オプションの値は value に保存され、他の列の異なる言語のオプションラベルに保存されました。 オプションの値は value に保存され、他の列の異なる言語のオプションラベルに保存されました。
postgresql1という名前のselection内のすべてのデータを一覧表示するアクションを作成します
select * from selectionステップ 2 複数選択コンポーネントの設定
データソースを
{{postgresql1.data}}に設定する言語に基づいてラベルを変更するようにラベルを設定します。
- {{ item.columnName }} を使用して列を設定します。
- ILLAで使用する言語を設定するには、 {{ currentUserInfo.language }} を使用します。
{{currentUserInfo.language=='ja-JP' ? item.options_jp : currentUserInfo.language == 'ko-KR' ? item.options_kr : currentUserInfo.language == 'zh-CN' ? item.options_zh : item.options_en }}
詳細
選択したテーブルに行を追加または削除することで、オプションを追加または削除できます。