Help us understand the problem. What is going on with this article?

vue.jsのコンポーネント集「Element」を使ってマルチプルセレクトを実装する

More than 1 year has passed since last update.

マルチプルセレクト何を使う?

マルチプルセレクトとは簡単に言うと複数選択可能なセレクトボックスです。
意外とお客様の求めるUI上必要なことが多く、今までも何度か要望に応えて参りました。
大体jQueryのマルチプルセレクトを使っていたのですが、なんとなく味気ない。

●jQueryマルチプルセレクトのデモ
 https://webkaru.net/jquery-plugin/sources/multiple-select/demo.html

フロントをvue.jsで開発している時に、お客様から
「このセレクトボックス複数選択したい」との要望。あ〜、またか。って感じで、
ちょこっと調べたところ、Vue.js 2.0ベースのコンポーネントライブラリの「Element」が
便利そうなので、使ってみました。

導入方法

●インストール
npm i element-ui -S

●main.jsにロケールをセットして読み込み

main.jsに追記
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/ja'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI, {locale})

※詳しくはhttp://element.eleme.io/#/en-US
のComponentからInstallation、Quick startあたりを参照。
ロケールについてはInternationalizationに書いてある。

もう使えちゃうマルチプルセレクト

●今回は以下の「Basic multiple select」を使用
http://element.eleme.io/#/en-US/component/select
あ、pug使っているので、適宜読み替えてください。
公式のテンプレートがhtmlなのでそっちを見るか。。

簡素化した実際のコード.pug
el-select(v-model="shopIds" multiple)
  el-option(v-for="shop in shops" v-bind:key="shop.id" v-bind:value="shop.id")
簡素化した実際のコード.js
data () {
    return {
        shopIds: []
    }
}
shopsの中は店の情報の配列

こんな感じの画面ができて、選択したshop.idがshopIdsに格納される。
スクリーンショット 2017-12-18 14.54.27.png

他にも

とにかくUIのデザイン部分で悩む時間がなくなるだけでかなりありがたい。
一般的に使う他のフロントのフレームワークでカバーできる部分も多いのですが、
私がとりあえず気になったり、使ったりしたもの。
・InputNumber(数字を入力させる場合)
http://element.eleme.io/#/en-US/component/input-number
・DatePicker(日付を入力させる場合)
http://element.eleme.io/#/en-US/component/date-picker
・Rate(星マークで評価させたい場合)
http://element.eleme.io/#/en-US/component/rate
・スイッチ
http://element.eleme.io/#/en-US/component/switch

disabled,placeholderが効かない

あんまり突っ込んで調べてないのですが、公式通りに実装したつもりでも
disabled,placeholderが効かないことがありました。
マルチプルセレクトはinput使っているので以下のjsにdisabledとplaceholderを追記
node_modules/element-ui/lib/input.js

node_modules/element-ui/lib/input.jsのdomprops.js
domProps: {
  "value": _vm.currentValue,
  "placeholder":_vm.placeholder,
  "disabled":_vm.disabled
},
diffeasy
「世界中の“むずかしい”を簡単に」を経営理念として、オーダーメイドシステムおよび自社サービス(大会運営向上心)を開発・運営
https://diffeasy.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away