vant实现select效果，单选和多选
官⽅推荐picker，但是我们项⽬⽤picker还要搭配Popup和cell、field，维护太太⿇烦，所以⾃⼰封装⼀个基于picker的select
2021-02-21更新
select单选
//封装VanFieldSelectPicker组件
<template>
<div class="dh-field">
<div class=" van-hairline--bottom">
<van-field
v-model="resultLabel"
v-bind="$attrs"
readonly
:is-link="$attrs.disabled === undefined"
input-align="right"
@click="showPopu($attrs.disabled)"
error-message-align='right'
class="dh-cell"
/>
<van-popup v-model="show" position="bottom">
<van-field v-model="searchVal"  placeholder="搜索" @input="search" v-if="isSearch" input-align="left"/>
<van-picker
v-bind="$attrs"
:columns="columnsData"
show-toolbar
@cancel="cancel"
@confirm="onConfirm"
@change="change"
:value-key="this.option.label"
/>
</van-popup>
</div>
</div>
error parse new</template>
<script>
export default {
name: 'VanFieldSelectPicker',
model: {
prop: 'selectValue'
},
props: {
columns: {
type: Array,
default: function () {
return []
}
},
selectValue: {
type: [String, Number],
default: ''
},
option: {
type: Object,
default: function () {
return { label: 'label', value: 'value' }
}
},
isSearch: {
type: Boolean,
default: false
},
offOption: { // 关闭option配置key-value；当数据是⾮集合的数组的时候，开启      type: Boolean,
default: false
}
},
computed: {
resultLabel: {
get () {
const res = lumns.filter(item => {
const data = this.offOption ? item : item[this.option.value]
return data === sultValue
})
let label = ''
if (res.length) {
label = this.offOption ? res[0] : res[0][this.option.label]
}
return label
},
set () {
}
}
},
data () {
return {
show: false,
searchVal: '',
resultValue: this.selectValue,
columnsData: []
}
},
methods: {
search (val) {
if (val) {
const data = this.offOption ? item : item[this.option.label]
return data.indexOf(val) > -1
})
} else {
}
},
onConfirm (value, index) {
const data = this.offOption ? value : value[this.option.value]
this.show = !this.show
this.$emit('confirm', value, index, sultValue)
},
change (val, index) {
this.$emit('change', val, index, sultValue)
},
cancel (val, index) {
this.show = !this.show
this.$emit('cancel', val, index, sultValue)
},
showPopu (disabled) {
if (disabled !== undefined && disabled !== false) {
return false
} else {
this.show = !this.show
}
}
},
watch: {
selectValue: function (newVal) {
},
:columns="columns"---------------------可选择的数据，只接受key-value格式的对象集合，[1,2,3]不可以:option="{label:'name',value:'code'}"--数据的配置格式，默认label(显⽰的⽂字)，value（具体值）checkbox多选
//封装VanFieldCheckbox组件
<template>
<div class="dh-field ">
<div class="van-hairline--bottom">
<van-field
v-model="resultLabel"
v-bind="$attrs"
readonly
:is-link="$attrs.disabled === undefined"
error-message-align='right'
input-align="right"
@click="showPopu($attrs.disabled)"
class="dh-cell"
/>
<van-popup v-model="show" position="bottom" class="" >
<div class="van-picker__toolbar">
<button type="button" class="van-picker__cancel" @click="cancel">取消</button>
<div class="van-ellipsis van-picker__title">{{$attrs.label}}</div>
<button type="button" class="van-picker__confirm" @click="onConfirm">确认</button>
</div>
<div class="checkbox-con"  >
<van-field v-model="searchVal"  placeholder="搜索" @input="search" v-if="isSearch" input-align="left"/>
<van-cell title="全选">
<template #right-icon>
<van-checkbox name="all" @click="toggleAll"  v-model="checkedAll"/>
</template>
</van-cell>
<van-checkbox-group v-model="checkboxValue" @change="change" ref="checkboxGroup">
<van-cell-group>
<van-cell
v-for="(item, index) in columnsData"
clickable
:key="item[option.value]"
:title="item[option.label]"
@click="toggle(index)"
>
<template #right-icon>
<van-checkbox :name="item[option.value]" ref="checkboxes" />
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
</div>
</van-popup>
</div>
</div>
</template>
<script>
export default {
name: 'VanFieldCheckbox',
model: {
prop: 'selectValue'
},
props: {
columns: {
type: Array,
default: function () {
return []
}
},
selectValue: {
type: Array,
default: function () {
return []
}
},
option: {
type: Object,
default: function () {
return { label: 'label', value: 'value' }
}
},
isSearch: {
type: Boolean,
default: false
}
},
computed: {
resultLabel: {
get () {
const res = lumns.filter(item => {
sultValue.indexOf(item[this.option.value]) > -1
})
const resLabel = res.map(item => {
return item[this.option.label]
})
return resLabel.join(',')
},
set () {
}
}
},
data () {
return {
show: false,
searchVal: '',
columnsData: JSON.parse(JSON.lumns)),
checkboxValue: JSON.parse(JSON.stringify(this.selectValue)),
checkedAll: false,
resultValue: JSON.parse(JSON.stringify(this.selectValue))
}
},
methods: {
search (val) {
if (val) {
return item[this.option.label].indexOf(val) > -1
})
} else {
}
},
getData (val) {
const res = lumnsData.filter(item => {
return val.indexOf(item[this.option.value]) > -1
})
return res
},
onConfirm () {
this.show = !this.show
this.$emit('confirm', sultValue, sultValue))    },
change (val) {
this.$emit('change', val, sultValue))
},
cancel () {
this.show = !this.show
this.$emit('cancel', sultValue)
},
toggle (index) {
this.$refs.checkboxes[index].toggle()
},
toggleAll (all) {
this.$leAll(this.checkedAll)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。