select 下拉选择

产品类型：这一项是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>

:selections=”buyTypes” 传入子组件 在子组件 接收这个参数

@on-change=”onParamChange(‘buyType', $event)” 通过这个事件 接收 子组件传入 的参数

子组件

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

select 多选

产品版本：这一项是select 涉及到父子组件信息传递 下面拆开讲解

父组件

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

这里用到 lodash 因为vuejs2.0 放弃了$.remove 方法 可以通过lodash 方法解决

以上所述是小编给大家介绍的vuejs2.0 select动态绑定下拉框详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！