详解vuejs2.0 select 动态绑定下拉框支持多选
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动态绑定下拉框详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
