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
推薦する
カルーセル効果を作成するためのjs
カルーセルはフロントエンド開発において比較的重要なポイントだと思います。ネイティブjsの知識ポイント...
Linux でタスク用のカスタム システム トレイ インジケーターを作成する
システム トレイ アイコンは、今日でも魔法のような機能です。アイコンを右クリックして目的のアクション...
MySQLデータのグループ化の詳細な説明
グループを作成グループ化は、SELECT ステートメントの GROUP BY 句で設定されます。例：...
DockerでMongoDBコンテナをデプロイする方法
目次Dockerとは展開する1. イメージをプルする2. 画像を表示する3. コンテナを実行する4....
MySQL でパーセンテージと最初の数パーセントを表示する方法
目次必要とする実装コードデータベース数日前、友人からこれを書くのを手伝ってほしいと頼まれました。ただ...
Vue プロジェクトで TS (TypeScript) を使用するための入門チュートリアル
目次1. Typescriptの紹介2. 設定ファイル webpack 設定3. プロジェクトに.t...
JavaScriptでマクロを使用する方法
言語では、DSL を実装するためにマクロがよく使用されます。マクロを使用すると、開発者は JSX 構...
トップナビゲーションバーメニューを作成するためのHTML+CSS
ナビゲーションバーの作成:技術要件: CS HTMLタグ達成目的:ナビゲーションバーメニューの作成コ...
HTML およびプラグイン アプリケーションにおけるデータ カスタム属性の使用の概要
HTML にはデータ属性が含まれていることがよくあります。これらは HTML5 のカスタム属性です。...
JS を使用して要素がビューポート内にあるかどうかを確認する方法
序文要素がビューポート内にあるかどうかを監視する2つの方法を共有する1. 位置計算Element.g...
ウェブページ（ウェブサイト）のデザインと制作に関する考えや経験の共有
まずは投稿する前に！ 「I Want to Study on My Own!」に改めて感謝します。た...
Nginx と GeoIP モジュールを使用して IP の地域情報を読み取る方法
LinuxにGeoIPをインストールする yum で nginx-module-geoip をインス...
vue3 を使用したジグソーパズルゲームのリファクタリングの例
序文プロジェクト内のパズルゲーム（デジタル華容路とも呼ばれる）を再構築するのに 2 日かかりました。...
Centos7にTenda U12ワイヤレスネットワークカードドライバーをインストールする際の問題を解決する
解決プロセス:方法1: CentOS7.3 のデフォルトのカーネル バージョンは低く、3.10.0-...
Vueメソッドに基づくシンプルなタイマーの実装
Vueのシンプルなタイマーを参考にしてください。具体的な内容は以下のとおりです原理: setInte...