需要装 elementUI
npm i bl-select
在main.js加
import BlSelect from 'bl-select'
Vue.use(BlSelect)
使用的地方
template部分
<bl-select
v-model="value"
:options="options"
:props="{label:'label', value:'value'}"
/>
js部分
data(){
return {
value: '',
options: [
{
label: '张三',
value: 1
},
{
label: '李四',
value: 2
}
]
}
}
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
multiple | Boolean | false | 是否多选,默认单选 |
filterable | Boolean | true | 是否支持检索,默认true,无需配置。功能已经实现 |
clearable | Boolean | false | 是否可清空 同el-select |
disabled | Boolean | false | 是否禁用bl-select |
fieldDisabled | String | option禁用字段 | |
options | Array | - | 列表数据 |
row | Boolean | false | 是否选中option(设置该值后,change方法会打印一个包含options(列表数据)的某一项) |
props | Object | - | label和value的配置 见下表 |
all | Boolean | false | 是否显示全选(multiple为true的前提下) |
all-text | String | 全选 | 全选文本(默认是全选) |
属性 | 值 |
---|---|
label | 设置label |
value | 设置的value |
方法名 | 说明 |
---|---|
change | 返回 value的值。如果设置了row 则返回一个对象 |
select-all | 全选事件 |
on-option | 单选情况下:获取当前选择数据的完整信息 |
html
<bl-select
v-model="value"
clearable
multiple
collapse-tags
all
:all-text="allText"
:options="options"
:props="{
value: 'value',
label: 'label'
}"
@change="change"
@select-all="selectAll"
@remove-tag="removeTag"
/>
{{ value }}
js
export default {
name: 'App',
components: {},
data() {
return {
value: '',
options: [{
value: '1',
label: '黄金糕'
}, {
value: '2',
label: '双皮奶'
}, {
value: '3',
label: '北京糖葫芦'
}, {
value: '4',
label: '蚵仔煎'
}, {
value: '5',
label: '龙须面'
}, {
value: '6',
label: '北京烤鸭'
}],
allText: '全选'
}
},
methods: {
selectAll() {
if (this.value.length < this.options.length) {
this.value = []
this.options.forEach(item => {
this.value.push(item.value)
})
this.value.unshift(this.allText)
}
},
change(val) {
if (!val.includes(this.allText) && this.value.length === this.options.length) {
this.value.unshift(this.allText)
} else if (val.includes(this.allText) && val.length - 1 < this.options.length) {
this.value = this.value.filter(item => item !== this.allText)
}
},
removeTag(val) {
if (val === this.allText) {
this.value = []
}
}
}
}