ElementUIはドロップダウンオプションと複数選択ボックスのサンプルコードを実装します
|
製品要件と UI スタイルの調整により、要素に組み込まれているドロップダウンの複数選択機能と競合が発生します。私は次のように自分で変更してみました。 ドロップダウン複数選択ボックス効果は以下のとおりです。
パッケージ内容は以下のとおりです。
<テンプレート>
<div class="select-checked">
<!-- ドロップダウンして複数選択ボックスを追加します -->
<el-選択
v-model="値"
複数
placeholder="選択してください"
:popper-append-to-body="false"
@remove-tag="タグを削除"
>
<el-オプション
v-for="オプション内の項目"
:key="アイテム.値"
:label="アイテム.ラベル"
:value="アイテムの値"
>
<el-checkbox v-model="item.check" @change="isChecked(item)">
{{item.label}}
</el-チェックボックス>
</el-option>
</el-select>
{{ 価値 }}
</div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
名前: 'SelectChecked',
コンポーネント: {},
小道具: {
オプション:{
タイプ: 配列
}
},
データ（） {
戻る {
価値： []
}
},
メソッド: {
//複数のチェックボックストリガー isChecked(item) {
if (item.check && this.value.indexOf(item.value) == -1) {
this.value.push(アイテム.value)
} そうでなければ (!item.check) {
this.value.forEach((elm, idx) => {
if (elm == item.value) {
this.value.splice(idx, 1)
}
})
}
this.$emit('selectedVal', this.value)
},
// 複数選択モードでタグを削除するときにトリガーされる removeTag(value) {
this.options.forEach((elm, idx) => {
elm.value == valueの場合{
elm.check = 偽
}
})
this.$emit('selectedVal', this.value)
}
}
}
</スクリプト>
<スタイル lang="scss">
.select-checked {
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
コンテンツ： '';
}
.el-チェックボックス{
幅: 100%;
パディング: 0 30px;
.el-チェックボックス__ラベル {
左マージン: 20px;
}
}
.el-select-dropdown__item {
パディング: 0;
}
}
</スタイル>
ページで使用されている
<!-- -->
<テンプレート>
<div class="content-box">
<div class="コンテナ">
<SelectChecked :options="オプション" @selectedVal="選択された値" />
</div>
</div>
</テンプレート>
<スクリプト>
'@/components/Select/SelectChecked' から SelectChecked をインポートします。
エクスポートデフォルト{
名前: 'レコード',
コンポーネント:
チェック済みを選択
},
データ（） {
戻る {
オプション: [
{
値: '001'、
ラベル:「ゴールデンケーキ」
チェック: 偽
},
{
値: '002'、
ラベル: 「ダブルスキンミルク」
チェック: 偽
},
{
値: '003'、
ラベル:「牡蠣オムレツ」
チェック: 偽
},
{
値: '004'、
ラベル: 「ドラゴンビアード麺」、
チェック: 偽
},
{
値: '005'、
ラベル:「北京ローストダック」
チェック: 偽
}
]、
}
},
時計： { }、
計算: {},
メソッド: {
選択された値(値){
console.log(111, value); // サブコンポーネントオプションの値を取得します}
},
作成された() {
console.log('作成されたレコード')
},
アクティブ化() {
console.log('作成されたレコード')
},
マウント() {}
}
</スクリプト>
<スタイル lang="scss">
</スタイル>
アップグレード - すべてのオプションを追加
<テンプレート>
<div class="select-checked">
<!-- ドロップダウンして複数選択ボックスを追加します -->
<el-選択
v-model="値"
複数
placeholder="選択してください"
:popper-append-to-body="false"
@remove-tag="タグを削除"
>
<el-オプション
v-for="オプション内の項目"
:key="アイテム.値"
:label="アイテム.ラベル"
:value="アイテムの値"
>
<el-checkbox v-model="item.check" @change="isCheck(item)">
{{item.label}}
</el-チェックボックス>
</el-option>
</el-select>
{{ 価値 }}
</div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
名前: 'SelectChecked',
コンポーネント: {},
小道具: {
オプション:
タイプ: 配列
}
},
データ（） {
戻る {
価値： []
}
},
メソッド: {
//複数のチェックボックストリガー isCheck(item) {
if (item.check && item.value == 'all') {
this.値 = []
this.options.forEach(要素 => {
要素のチェック = true
this.value.push(要素.value)
})
} そうでない場合 (!item.check && item.value == 'all') {
this.値 = []
this.options.forEach(要素 => {
要素.チェック = false
})
}
もし （
アイテムチェック&&
this.value.indexOf(item.value) == -1 &&
アイテム値 !== 'すべて'
）{
this.value.forEach((elm, idx) => {
if (elm == 'すべて') {
this.value.splice(idx, 1)
}
})
this.value.push(アイテム.value)
if (this.value.length == this.options.length - 1) {
this.options[0].check = true
this.value.unshift('すべて')
} それ以外 {
this.options[0].check = false
}
} そうでない場合 (!item.check && item.value !== 'all') {
this.options[0].check = false
this.value.forEach((elm, idx) => {
if (elm == item.value || elm == 'all') {
this.value.splice(idx, 1)
}
})
}
this.$emit('selectedVal', this.value)
},
// 複数選択モードでタグを削除するときにトリガーされる removeTag(value) {
（値 == 'すべて'）の場合{
this.options.forEach((elm, idx) => {
elm.check = 偽
})
this.値 = []
} それ以外 {
this.options.forEach((elm, idx) => {
if (elm.value == 値 || elm.value == 'すべて') {
elm.check = 偽
}
})
}
this.$emit('selectedVal', this.value)
}
}
}
</スクリプト>
<スタイル lang="scss">
.select-checked {
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
コンテンツ： '';
}
.el-チェックボックス{
幅: 100%;
パディング: 0 30px;
.el-チェックボックス__ラベル {
左マージン: 20px;
}
}
.el-select-dropdown__item {
パディング: 0;
}
}
</スタイル>
コンポーネントで使用される
<!-- -->
<テンプレート>
<div class="コンテンツボックスを選択チェック済み">
<div class="コンテナ">
<SelectChecked :options="オプション" @selectedVal="選択された値" />
</div>
</div>
</テンプレート>
<スクリプト>
'@/components/Select/SelectChecked' から SelectChecked をインポートします。
エクスポートデフォルト{
名前: 'レコード',
コンポーネント:
チェック済みを選択
},
データ（） {
戻る {
オプション: [
{
値: 'すべて'、
ラベル: 'すべて'、
チェック: 偽
},
{
値: '001'、
ラベル:「ゴールデンケーキ」
チェック: 偽
},
{
値: '002'、
ラベル: 「ダブルスキンミルク」
チェック: 偽
},
{
値: '003'、
ラベル:「牡蠣オムレツ」
チェック: 偽
},
{
値: '004'、
ラベル: 「ドラゴンビアード麺」、
チェック: 偽
},
{
値: '005'、
ラベル:「北京ローストダック」
チェック: 偽
}
]、
値1: []
}
},
時計：
}
},
計算: {},
メソッド: {
選択された値(値){
// すべてある場合はすべて削除することに注意してください value.forEach((item,idx )=>{
if(item == 'すべて'){
値.splice(idx, 1)
}
})
console.log(111, 値);
}
},
作成された() {
console.log('作成されたレコード')
},
アクティブ化() {
console.log('作成されたレコード')
},
マウント() {}
}
</スクリプト>
<スタイル lang="scss">
.select-checked {
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
コンテンツ： '';
}
.el-チェックボックス{
幅: 100%;
パディング: 0 30px;
.el-チェックボックス__ラベル {
左マージン: 20px;
}
}
.el-select-dropdown__item {
パディング: 0;
}
}
</スタイル>
効果は以下のとおりです
改訂と改善を求めるご指導とご協力に感謝いたします
<テンプレート>
<div class="select-checked">
<el-選択
:value="選択済み"
複数
placeholder="選択してください"
:popper-append-to-body="false"
>
<el-option :value="''" label="すべて" class="複数">
<el-checkbox v-model="optionsAll" @change="handleoptionsAllChange">
すべて</el-checkbox>
</el-option>
<el-オプション
クラス="複数"
:value="キー"
:label="アイテム"
v-for="(item, key) in optionsData"
:key="キー"
>
<el-チェックボックス
:value="選択されたオプションが含まれます(キー)"
@change="handleTaskItemChange(キー)"
>
{{ アイテム }}
</el-チェックボックス>
</el-option>
</el-select>
</div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
名前: '選択'、
コンポーネント: {},
小道具: {
オプション:
タイプ: オブジェクト
}
},
データ（） {
戻る {
オプションデータ: {},
オプションすべて: true、
選択されたオプション: [],
}
},
時計：
オプション:
ハンドラ(newVal) {
コンソールログ(新しい値)
this.optionsData = newVal
this.selectedOptions = Object.keys(newVal)
},
即時: true, // デフォルト値は false です。ページに入ると、最初のバインディング値はすぐにはリッスンされません。ハンドラー内の操作は、データが変更されたときにのみ実行されます。 // deep: true, // 深い深さ},
},
計算: {
選択された() {
もし （
this.selectedOptions.length === Object.keys(this.optionsData).length
）{
戻る ['']
} それ以外 {
this.selectedOptionsを返す
}
}
},
メソッド: {
ハンドルオプションAllChange(isAll) {
if (isAll) {
this.selectedOptions = Object.keys(this.optionsData)
} それ以外 {
this.selectedOptions = []
}
},
タスクアイテム変更処理(キー) {
if (this.selectedOptions.includes(キー)) {
this.selectedOptions.splice(this.selectedOptions.indexOf(キー), 1)
} それ以外 {
this.selectedOptions.push(キー)
}
this.optionsAll =
this.selectedOptions.length === Object.keys(this.optionsData).length
}
}
}
</スクリプト>
<スタイル lang="scss">
.select-checked {
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
コンテンツ： '';
}
.el-チェックボックス{
幅: 100%;
パディング: 0 30px;
.el-チェックボックス__ラベル {
左マージン: 20px;
}
}
.el-select-dropdown__item {
パディング: 0;
}
.el-tag__close、
.el-icon-close {
表示: なし;
}
.el-tag.el-tag--info {
背景: 透明;
境界線: 0;
}
.el-select {
.el-select__タグ{
flex-wrap: nowrap;
オーバーフロー: 非表示;
}
.elタグ{
背景色: #fff;
境界線: なし;
色: #606266;
フォントサイズ: 13px;
右パディング: 0;
& ~ .el-タグ {
左マージン: 0;
}
&:not(:last-child)::after {
コンテンツ： '、';
}
}
}
}
</スタイル>
コンポーネントの使用法:
<!-- -->
<テンプレート>
<div class="コンテンツボックスを選択チェック済み">
<div class="コンテナ">
<Select :options="optionsData" @selected="selected" />
</div>
</div>
</テンプレート>
<スクリプト>
'@/components/Select/Select' から Select をインポートします。
エクスポートデフォルト{
名前: 'レコード',
コンポーネント:
選択
},
データ（） {
戻る {
オプションデータ: {
'001': 'ゴールデンケーキ'、
'002': 'ダブルスキンミルク'、
'003': '牡蠣オムレツ'、
'004': 'ドラゴンビアードヌードル'、
'005': '北京ダック'
},
}
},
時計： {}、
計算: {},
メソッド: {
選択された(値){
console.log(値);
str = value.join() とします。
コンソール.log(文字列)
// オプションが「all」の場合、データ内の値は空の文字列またはnoneになることに注意してください。if (value.includes('') || value.length === 0) {
console.log(Object.keys(this.optionsData).join());
}
}
},
作成された() {
console.log('作成されたレコード')
},
アクティブ化() {
console.log('作成されたレコード')
},
マウント() {}
}
</スクリプト>
<style lang="scss" スコープ>
</スタイル>
効果は以下のとおりです。
上記はオブジェクト形式のデータなので、操作が不便かもしれません。配列オブジェクト形式のデータを以下のように再構成しました。
<テンプレート>
<div class="select-checked">
<el-選択
:value="選択済み"
:class="{ すべて: オプションすべて }"
複数
placeholder="選択してください"
:popper-append-to-body="false"
>
<el-option :value="''" label="すべて" class="複数">
<el-checkbox v-model="optionsAll" @change="handleoptionsAllChange">
すべて</el-checkbox>
</el-option>
<el-オプション
クラス="複数"
:value="アイテムの値"
:label="アイテム.ラベル"
v-for="(item, key) in optionsData"
:key="キー"
>
<el-checkbox v-model="item.check" @change="handleTaskItemChange(item)">
{{item.label}}
</el-チェックボックス>
</el-option>
</el-select>
</div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
名前: '選択'、
コンポーネント: {},
小道具: {
オプション:
タイプ: 配列
}
},
データ（） {
戻る {
オプションデータ: [],
オプションすべて: true、
選択されたオプション: []
}
},
時計：
オプション:
ハンドラ(newVal) {
this.optionsData = newVal
newVal.forEach(アイテム => {
if (item.check) {
this.selectedOptions.push(item.value)
}
})
},
即時: 真
// deep: true, // 深度監視}
},
計算: {
選択された() {
if (this.selectedOptions.length === this.options.length) {
戻る ['']
} それ以外 {
this.selectedOptionsを返す
}
}
},
メソッド: {
ハンドルオプションAllChange(isAll) {
if (isAll) {
this.optionsData.forEach((elm, idx) => {
elm.check = 真
this.selectedOptions.push(elm.value)
})
} それ以外 {
this.optionsData.forEach((elm, idx) => {
elm.check = 偽
})
this.selectedOptions = []
}
this.$emit('selected',this.selectedOptions)
},
タスクアイテムの変更を処理する(アイテム) {
// コンソール.log(アイテム)
// 以下はインデックスを取得するメソッドです。これはカプセル化して書き出すことができます。Array.prototype.getArrayIndex = function (obj) {
(var i = 0; i < this.length; i++) の場合 {
if (this[i] === obj) {
戻る
}
}
-1を返す
}
if (!item.check) {
this.optionsData.forEach((elm, idx) => {
if (item.value == elm.value) {
インデックス = this.selectedOptions.getArrayIndex(item.value) とします。
this.selectedOptions.splice(インデックス、1)
}
})
} それ以外 {
this.optionsData.forEach((elm, idx) => {
if (item.value == elm.value) {
this.selectedOptions.push(elm.value)
}
})
}
this.optionsAll = this.selectedOptions.length === this.optionsData.length
// console.log(this.selectedOptions、this.optionsData) を実行します。
this.$emit('selected', this.selectedOptions)
}
}
}
</スクリプト>
<スタイル lang="scss">
.select-checked {
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
コンテンツ： '';
}
.el-チェックボックス{
幅: 100%;
パディング: 0 30px;
.el-チェックボックス__ラベル {
左マージン: 20px;
}
}
.el-select-dropdown__item {
パディング: 0;
}
.el-tag__close、
.el-icon-close {
表示: なし;
}
.el-tag.el-tag--info {
背景: 透明;
境界線: 0;
}
.el-select {
.el-select__タグ{
flex-wrap: nowrap;
オーバーフロー: 非表示;
}
.elタグ{
背景色: #fff;
境界線: なし;
色: #606266;
フォントサイズ: 13px;
右パディング: 0;
& ~ .el-タグ {
左マージン: 0;
}
&:not(:last-child)::after {
コンテンツ： '、';
}
}
}
}
</スタイル>コンポーネントで使用される
<!-- -->
<テンプレート>
<div class="コンテンツボックスを選択チェック済み">
<div class="コンテナ">
<Select :options="オプション" @selected="選択済み"/>
</div>
</div>
</テンプレート>
<スクリプト>
'@/components/Select/Select' から SelectTest をインポートします。
エクスポートデフォルト{
名前: 'レコード',
コンポーネント:
選択、
},
データ（） {
戻る {
オプション: [
{
値: '001'、
ラベル:「ゴールデンケーキ」
チェック: 真
},
{
値: '002'、
ラベル: 「ダブルスキンミルク」
チェック: 真
},
{
値: '003'、
ラベル:「牡蠣オムレツ」
チェック: 真
},
{
値: '004'、
ラベル: 「ドラゴンビアード麺」、
チェック: 真
},
{
値: '005'、
ラベル:「北京ローストダック」
チェック: 真
}
]、
}
},
時計：
},
計算: {},
メソッド: {
選択された(値){
console.log(値);
}
},
作成された() {
console.log('作成されたレコード')
},
アクティブ化() {
console.log('作成されたレコード')
},
マウント() {}
}
</スクリプト>
効果は以下のとおりです。
ドロップダウンオプションと複数選択ボックスを実装したelementUIのサンプルコードに関するこの記事はこれで終わりです。関連するelementドロップダウンオプションと複数選択ボックスの詳細については、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Docker を使用して Go Web アプリケーションをデプロイする方法
>>: HTML テーブルタグチュートリアル (11): 水平方向の配置属性 ALIGN
推薦する
Docker はキューとタスクのスケジューリングを実現するために Laravel アプリケーションをデプロイします
前回の記事では、Docker を使用して Laravel アプリケーションをデプロイする方法について...
MySQL でのワイルドカードを使用したファジークエリの実装に関する簡単な説明
MySQL データベースでは、あいまいクエリが必要な場合にワイルドカードを使用します。まず、演算子と...
Vueコンポーネントの基本のまとめ
コンポーネントの基本1 コンポーネントの再利用コンポーネントは再利用可能な Vue インスタンスです...
MySQL 8.0.11 圧縮版のインストールと設定方法のグラフィックチュートリアル
MySQL 8.0圧縮パッケージのインストール方法、詳細は次のとおりです知らせ：オペレーティング シ...
Vue検証コードコンポーネントの使い方の詳しい説明
この記事の例では、vue検証コードコンポーネントで使用される具体的な実装コードを参考までに共有してい...
Vueはスクロールロードテーブルを実装します
目次成果を達成する転がり荷重知識備蓄コンポーネントのパッケージ1. コンポーネントの命名2. 小道具...
MySQLのさまざまなロックに関する詳細な理解
目次ロックの概要ロックの分類データベース操作の粒度データ操作の種類MySQL ロックさまざまなストレ...
Windows での MySQL 5.7.10 のインストールと設定のチュートリアル
MySQL は、ユーザーごとに 2 つの異なるバージョンを提供します。 MySQL コミュニティ サ...
MySQLのGROUP BYステートメントを最適化する方法
MySQL で、id、a、b の 3 つのフィールドを持つ新しいテーブルを作成します。次のように、同...
HTML+SassはHambergurMenu（ハンバーガーメニュー）を実装します
先日、外国人の方がHTML+CSSを使ってHamburgerMenuを実装している動画を見ました。最...
Linux userdel コマンドの使用法
1. コマンドの紹介userdel (ユーザー削除) コマンドは、ユーザー アカウントと関連ファイル...
指定されたIEブラウザのレンダリング方法の詳細な理解
<meta http-equiv="X-UA-compatible" co...
Dockerはローカルイメージとコンテナの保存場所を設定します
指定したサイズより大きいファイルを検索するには、find コマンドを使用します。 検索 / -typ...
VMware Workstation16 と Navicat リモート接続での Centos7 での MySQL8.0 インストール プロセス
目次1. CentOS7+MySQL8.0、yumソースインストール2. MySQLにログインしてパ...
MySQLテーブルの内容の変更を監視し、MySQL binlogを有効にする
序文binlog は、MySQL のすべての追加、削除、および変更ステートメントを記録するバイナリ ...