详解vuejs2.0 select 动态绑定下拉框支持多选

 <div class="sales-board-line">    <div class="sales-board-line-left">     产品类型：    </div>    <div class="sales-board-line-right">     <v-selection :selections="buyTypes" @on-change="onParamChange('buyType', $event)"></v-selection>    </div>   </div>

<script>import VSelection from '../../components/base/selection'import _ from 'lodash'export default { components: { VSelection, VCounter, VChooser, VMulChooser, MyDialog: Dialog, BankChooser, CheckOrder }, data () { return {  buyNum: 0,  buyType: {},  versions: [],  period: {},  price: 0,  versionList: [  {   label: '客户版',   value: 0  },  {   label: '代理商版',   value: 1  },  {   label: '专家版',   value: 2  }  ],  periodList: [  {   label: '半年',   value: 0  },  {   label: '一年',   value: 1  },  {   label: '三年',   value: 2  }  ],  buyTypes: [  {   label: '入门版',   value: 0  },  {   label: '中级版',   value: 1  },  {   label: '高级版',   value: 2  }  ],  isShowPayDialog: false,  bankId: null,  orderId: null,  isShowCheckOrder: false,  isShowErrDialog: false } }, methods: { onParamChange (attr, val) {  this[attr] = val  // this.getPrice()  console.log(this[attr], attr) }, getPrice () {  let buyVersionsArray = _.map(this.versions, (item) => {  return item.value  })  let reqParams = {  buyNumber: this.buyNum,  buyType: this.buyType.value,  period: this.period.value,  version: buyVersionsArray.join(',')  }  this.$http.post('/api/getPrice', reqParams)  .then((res) => {  this.price = res.data.amount  }) }, onChangeBanks (bankObj) {  this.bankId = bankObj.id }, confirmBuy () {  let buyVersionsArray = _.map(this.versions, (item) => {  return item.value  })  let reqParams = {  buyNumber: this.buyNum,  buyType: this.buyType.value,  period: this.period.value,  version: buyVersionsArray.join(','),  bankId: this.bankId  }  this.$http.post('/api/createOrder', reqParams)  .then((res) => {  this.orderId = res.data.orderId  this.isShowCheckOrder = true  this.isShowPayDialog = false  }, (err) => {  this.isShowBuyDialog = false  this.isShowErrDialog = true  }) } }, mounted () { this.buyNum = 1 this.buyType = this.buyTypes[0] this.versions = [this.versionList[0]] this.period = this.periodList[0] }}</script>

<template> <div class="selection-component">  <div class="selection-show" @click="toggleDrop">  <span>{{ selections[nowIndex].label }}</span>  <div class="arrow"></div>  </div>  <div class="selection-list" v-if="isDrop">  <ul>   <li v-for="(item, index) in selections" @click="chooseSelection(index)">{{ item.label }}</li>  </ul>  </div> </div></template><script>export default { props: { selections: {  type: Array,  default: [{  label: 'test',  value: 0  }] } }, data () { return {  isDrop: false,  nowIndex: 0 } }, methods: { toggleDrop () {  this.isDrop = !this.isDrop }, chooseSelection (index) {  this.nowIndex = index  this.isDrop = false  this.$emit('on-change', this.selections[this.nowIndex]) } }}</script>

<style scoped>.selection-component { position: relative; display: inline-block;}.selection-show { border: 1px solid #e3e3e3; padding: 0 20px 0 10px; display: inline-block; position: relative; cursor: pointer; height: 25px; line-height: 25px; border-radius: 3px; background: #fff;}.selection-show .arrow { display: inline-block; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #e3e3e3; width: 0; height: 0; margin-top: -1px; margin-left: 6px; margin-right: -14px; vertical-align: middle;}.selection-list { display: inline-block; position: absolute; left: 0; top: 25px; width: 100%; background: #fff; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; z-index: 5;}.selection-list li { padding: 5px 15px 5px 10px; border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3; cursor: pointer; background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.selection-list li:hover { background: #e3e3e3;}</style>

<div class="sales-board-line">    <div class="sales-board-line-left">     产品版本：    </div>    <div class="sales-board-line-right">     <v-mul-chooser     :selections="versionList"     @on-change="onParamChange('versions', $event)"></v-mul-chooser>    </div>   </div>

<template> <div class="chooser-component">  <ul class="chooser-list">   <li   v-for="(item, index) in selections"   @click="toggleSelection(index)"   :title="item.label"   :class="{active: checkActive(index)}"   >{{ item.label }}</li>  </ul>  </div> </div></template><script>import _ from 'lodash'export default { props: { selections: {  type: Array,  default: [{  label: 'test',  value: 0  }] } }, data () { return {  nowIndexes: [0] } }, methods: { toggleSelection (index) {  if (this.nowIndexes.indexOf(index) === -1) {  this.nowIndexes.push(index)   }  else {  this.nowIndexes = _.remove(this.nowIndexes, (idx) => {   return idx !== index  })  }  let nowObjArray = _.map(this.nowIndexes, (idx) => {  return this.selections[idx]  })  this.$emit('on-change', nowObjArray) }, checkActive (index) {  return this.nowIndexes.indexOf(index) !== -1 } }}</script>

<style scoped>.chooser-component { position: relative; display: inline-block;}.chooser-list li{ display: inline-block; border: 1px solid #e3e3e3; height: 25px; line-height: 25px; padding: 0 8px; margin-right: 5px; border-radius: 3px; text-align: center; cursor: pointer;}.chooser-list li.active { border-color: #4fc08d; background: #4fc08d; color: #fff;}</style>