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
推薦する
MySQLのインストールと設定に関する詳細なチュートリアル
目次インストール不要のMySQLバージョン1. インストール パッケージをダウンロードします。 2....
テンプレートタグの使用方法の詳細な説明（Vue での使用方法の概要を含む）
目次1. HTML5のテンプレートタグ2. テンプレートタグ操作のプロパティとメソッド3. Vueの...
Vue3.0はドロップダウンメニューのカプセル化を実装します
Vue3.0 がリリースされてからしばらく経ちましたが、勉強を始める必要があります。まず、達成したい...
mysqldump を使用して MySQL データをバックアップする方法
1. mysqldump の紹介mysqldump は、MySQL に付属する論理バックアップ ツー...
WeChatミニプログラムは同時通訳を利用して音声認識を実装します
私は同時通訳音声認識機能を使用して、WeChatアプレットのホームページの音声検索機能を実現しました...
Linux で time(NULL) 関数と localtime() を使用して現在の時刻を取得する方法
time(); 関数関数プロトタイプ: time_t time(time_t *timer)関数の目...
Reactはグローバル箇条書きボックスメソッドをカプセル化します
この記事の例では、Reactカプセル化グローバルポップアップボックスの具体的なコードを参考までに共有...
Nginx で同じドメイン名を持つ複数のプロジェクトを構成する方法
Nginx を使用して同じドメイン名で複数のプロジェクトを構成するには、次の 2 つの方法があります...
アニメーション効果のようなVueトランジションの例
目次結果を一目で見るハート効果デジタルスクロールアニメーションアニメーションのように結果を一目で見る...
Vueデータ監視の原理の詳細な説明
<本文> <div id="ルート"> <h1&...
CentOS 7 で NFS ファイル共有ストレージ サービスを構築するための完全な手順
序文NFS (Network File System) は、ネットワーク ファイル システムを意味し...
TypeScript 2.0 マーク付き共用体型の詳細な説明
目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...
HTML でナンバープレート番号と州の略語を入力するためのサンプルコード
原理としては、まずボタン付きの div を記述し、次に画面のサイズに応じて自動的に適応してキーボード...
JavaScript 配列重複排除ソリューション
目次方法1: set: データ型ではなくデータ構造であり、メンバーは一意である方法2: オブジェクト...
ウェブサイト製品設計の参考となるいくつかの原則
以下の分析は製品設計原則に関するものですが、そのほとんどはウェブサイト製品に基づいているため、ユーザ...