前言:
对iview的select下拉进行二次封装,基本上常用的参数和方法里面都有
下拉组件:cselect.vue
<template>
<Select
v-model="sel_val"
:clearable="clearable"
:label-in-value="labelAndVal"
:element-id='Id'
:multiple='multiple'
:filterable='filterable'
:size='size'
:placeholder='placeholder'
:labelAndVal='labelAndVal'
:placement='placement'
@on-change='changeFun'
@on-query-change='changeSearch'
@on-clear='clearFun'
@on-open-change='openChangeFun'
>
<Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</template>
<script>
export default {
name:'',
props:{
clearable: {//是否可以清空选项,只在单选时有效
type: Boolean,
default: true
},
multiple: { //是否支持多选
type: Boolean,
default: false
},
filterable: { //是否支持搜索,多选搜索时,可以使用键盘Delete快捷删除最后一个已选项
type: Boolean,
default: false
},
size: String, //选择框大小,可选值为large、small、default或者不填
placeholder: String, //选择框默认文字
labelAndVal: { //选择框默认文字,ture是只返回value,false是label和value 一并返回
type: Boolean,
default: true
},
placement: String, //选择框默认文字-弹窗的展开方向,可选值为 top、bottom、top-start、bottom-start、top-end、bottom-end
Id:String,//给表单元素设置 id
sel_val: [String,Number,Array],//单选时只接受 String 或 Number,多选时只接受 Array
options: { //下拉框数据
type: Array,
default: []
}
},
data () {
return {
value:''
};
},
mounted(){
this.value = this.sel_val;
},
methods: {
changeFun(data){//下拉框值发生改变时调用
this.$emit('changeFun',data);//data有value和label
},
changeSearch(query){//搜索词改变时触发,***注意这个事件想触发,不要传sel_val,我们搜索的同时,他会给赋值,造成冲突报错
let str = {
'text':query
}
this.$emit('changeSearch',str);
},
clearFun(){//点击清空按钮时触发
this.$emit('clearFun');
},
openChangeFun(data){//true / false
this.$emit('openChangeFun',data);
},
},
watch: {}
}
</script>
<style lang='less' scoped>
</style>
调用方法:
<CSelect :options='this.ssdcOptions' :sel_val='this.sel_val'></CSelect>
data () {
return {
sel_val:'永宁电厂',
ssdcOptions:[//所属电厂下拉
{
value: '宁海电厂',
label: '宁海电厂'
},
{
value: '永宁电厂',
label: '永宁电厂'
},
]
};
},