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
推薦する
Vue の img の src 画像アドレスの動的スプライシングの問題について
Vue での img の動的スプライシングを見てみましょう。src 画像アドレス、具体的な内容は次の...
DIV 背景半透明テキスト非半透明スタイル
DIVの背景は半透明ですが、DIV内の文字は半透明ではありませんコードをコピーコードは次のとおりです...
MySQLのサブクエリユニオンの効率性についての簡単な説明と
最近の製品テストでは、同時呼び出し数が 10 未満の場合に応答時間が 100 ミリ秒以内に維持できな...
CSSはリストのスタイルを設定し、ナビゲーションメニューの実装コードを作成します。
1. リストシンボルを設定するlist-style-type: attribute; //リストの...
MySQLはカスタム関数を使用して親IDまたは子IDを再帰的に照会します
背景： MySQL では、レベルに制限がある場合、たとえば、ツリーの最大深度を事前に決定できる場合、...
Node の SMS API で検証コード ログインを実装するためのサンプル コード
1. ノードサーバーのセットアップ + データベース接続ここでの操作は比較的簡単でわかりやすいです。...
MySQL 8.0.17 のインストールと設定のグラフィックチュートリアル
この記事は、参考のためにMySQL 8.0.17のインストールと設定のグラフィックチュートリアルを記...
MySQL の結合クエリとサブクエリの問題
目次複数テーブル結合の基本構文クロス結合と直積現象クロスコネクトデカルト積現象内部結合外部結合左外部...
nginx の 2 つのモジュールの proxy_pass の違い
1. 1.ngx_stream_proxy_moduleモジュールのproxy_passディレクティ...
CSS3 は 3D キューブの読み込み効果を作成します
簡単な説明これは CSS3 のクールな 3D キューブのプリロード効果です。この特殊効果は、シンプル...
Linux でファイルの権限 (所有権) を変更する
Linux と Unix はマルチユーザー オペレーティング システムであるため、ファイルの権限と所...
HTML と CSS の命名規則の概要
CSS命名規則 ヘッダー: ヘッダーコンテンツ: コンテンツ/含むフッターナビゲーション: navサ...
Nginx リバース プロキシと負荷分散を実装する方法 (Linux ベース)
ここで nginx のリバース プロキシを試してみましょう。リバースプロキシ方式とは、インターネット...
Webデザインチュートリアル（6）：デザインへの情熱を持ち続ける
<br />前の記事：Webデザインチュートリアル（5）：Webビジュアルデザイン。 1...
MySQL複合インデックスの概要
目次1. 背景2. 複合インデックスを理解する3. 左端一致原則4. フィールド順序の影響5. 単一...