멀티플 선택 무엇을 사용합니까?

멀티플 셀렉트란 간단하게 말하면 복수 선택 가능한 셀렉트 박스입니다.
의외로 고객이 요구하는 UI상 필요한 것이 많아, 지금까지도 몇번이나 요망에 응해 왔습니다.
대체로 jQuery의 멀티플 셀렉트를 사용하고 있었습니다만, 어쩐지 맛이 없다.

●jQuery 멀티플 셀렉트 데모
htps : // 우에 b 걸린다. 네 t/j 쿠에 ry-p ㎅ 긴/그래서 r세 s/무 l 치 pぇ-세 ct/에서도. 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})

※ 자세한 내용은 ht tp // 에멘 t. 네. 이오 / # / 엔우 S
Component에서 Installation, Quick start 당 참조.
로케일에 대해서는 Internationalalization에 써 있다.

이미 사용할 수있는 멀티플 선택

●이번에는 이하의 「Basic multiple select」를 사용
ht tp // 에멘 t. 네. 이오 / # / 엔 - S / 코 m 포넨 t / 세이 ct
아, 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에 저장된다.

그 밖에도

어쨌든 UI의 디자인 부분에서 고민하는 시간이 없어지는 것만으로 꽤 고맙다.
일반적으로 사용하는 다른 프런트의 프레임워크로 커버할 수 있는 부분도 많습니다만,
내가 우선 신경이 쓰거나 사용한 것.
· InputNumber (숫자를 입력하는 경우)
ht tp // 에멘 t. 네. 이오 / # / 엔 루 S / 코 m 포넨 t / 린 푸 t n m r
· DatePicker (날짜 입력시)
ht tp // 에멘 t. 네. 이오 / # / En-S / 코 m 포넨 t / Date-P c r
・Rate(별 마크로 평가시키고 싶은 경우)
ht tp // 에멘 t. 네. 이오 / # / 엔우 S / 코 m 포넨 t / 라테
· 스위치
ht tp // 에멘 t. 네. 이오 / # / 엔 - S / 코 m 포넨 t / 수 tch

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
},