详解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>