vue-cli3.0+antd+select
前言:通过和iview和element,antd还是有他特殊的优势的,那就是功能更加丰富,当然,功能丰富同样代表着复杂程度相比较来说,更高了,这里来对他进行二次封装,此外:在我们实际应用的情况下会遇到给他赋值赋不上,用defaultValue不好使,满足不了我们的需要,需要用value来实现,点我查看详情实现步骤:1、我们的封装组件a...
·
前言:
通过和 iview 和 element , antd 还是有他特殊的优势的,那就是功能更加丰富,当然,功能丰富同样代表着复杂程度相比较来说,更高了,这里来对他进行二次封装,此外:
在我们实际应用的情况下会遇到给他赋值赋不上,用defaultValue不好使,满足不了我们的需要,需要用value来实现,
点我查看详情
实现步骤:
1、我们的封装组件antd_select.vue
<template>
<a-select
style="min-width: 60px"
:value='selVal'
:defaultValue="defaultValue"
:dropdownClassName="dropdownClassName"
:dropdownStyle="dropdownStyle"
:filterOption="filterOption"
:firstActiveValue="firstActiveValue"
:maxTagCount="maxTagCount"
:maxTagTextLength="maxTagTextLength"
:placeholder="placeholder"
:defaultOpen="defaultOpen"
:getPopupContainer="getPopupContainer"
:allowClear="allowClear"
:autoFocus="autoFocus"
:defaultActiveFirstOption="defaultActiveFirstOption"
:disabled="disabled"
:dropdownMatchSelectWidth="dropdownMatchSelectWidth"
:notFoundContent="notFoundContent"
:showSearch="showSearch"
:showArrow="showArrow"
:labelInValue="labelInValue"
:mode="mode"
:size="size"
@change="selectChange"
@blur="blurFun"
@focus='focusFun'
@inputKeydown='inputKeydown'
@search='searchVal'
>
<a-select-option :value="item.value" v-for="(item,index) in options" :key="index">{{item.label}}</a-select-option>
</a-select>
</template>
<script>
export default {
props: {
/**
* 下拉框数据
*/
options:Array,
/**
* 参数
*/
Value:Object,//v-model
/**
* 默认选中的值
* 千万注意,如果labelInValue == false,那么直接传字符串就行,true的话得传对象
* 1、String,传选中的value
* 2、 defaultValue:{
key:'1226SX13518X'
}
*/
defaultValue:Object,//默认数据-string|string[]|number|number[]
dropdownClassName:String,//下拉菜单的 className 属性
dropdownStyle:Object,//下拉菜单的 style 属性
filterOption:Boolean||Function,//是否根据输入项进行筛选,当其为一个函数时,会接收 inputValue, option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 false
firstActiveValue:String,//默认高亮的选项
maxTagCount:Number,//最多显示多少个 tag
maxTagTextLength:Number,//最大显示的 tag 文本长度
placeholder:String,//默认值
defaultOpen:Boolean,//是否默认展开下拉菜单
getPopupContainer: {//菜单渲染父节点,默认渲染到body
type: Function,
default:triggerNode => triggerNode.parentNode//指向父级
},
allowClear:{//是否支持删除
type:Boolean,
default:true,
},
autoFocus:{//默认获取焦点
type:Boolean,
default:false,
},
defaultActiveFirstOption:{//默认高亮下拉里面第一个
type:Boolean,
default:true,
},
disabled:{//是否禁用
type:Boolean,
default:false,
},
dropdownMatchSelectWidth:{//下拉菜单和选择器同宽
type:Boolean,
default:true,
},
notFoundContent:{//当下拉列表为空时显示的内容
type:String,
default:'暂无数据'
},
showSearch:{//使单选模式可搜索
type:Boolean,
default:false,
},
showArrow:{//是否显示下拉小箭头
type:Boolean,
default:true,
},
/**
* 是否把每个选项的 label 包装到 value 中
* 会把 Select 的 value 类型从 string 变为 {key: string, label: vNodes} 的格式
*/
labelInValue:{
type:Boolean,
default:true,
},
/**
* 设置 Select 的模式为多选或标签
* 'default' | 'multiple' | 'tags' | 'combobox'
*/
mode:String,
/**
* 选择框大小
* large small
*/
size:String,
/**更多详细请参考官方api */
},
data () {
return {
name:'',//select封装
selVal:{},//监听
};
},
components: {},
computed: {},
created() {},
mounted() {
},
methods: {
/**
* 下拉值发生改变时
*/
selectChange(value,option){
this.selVal = value;
this.$emit('selectChange',value);
},
/**
* 失去焦点的时回调
*/
blurFun(){
this.$emit('blurFun');
},
/**
* 获得焦点时回调
*/
focusFun(){
this.$emit('focusFun');
},
/**
* 键盘按下时回调
*/
inputKeydown(){
this.$emit('inputKeydown');
},
/**
* 文本框值变化时回调
*/
searchVal(value){
this.$emit('inputKeydown',value);
},
/**更多详细请参考官方api */
},
watch: {
/**
* 监听传来的值
*/
Value(val){
if(val.key == '' || val.key == undefined || val.key == null){
return;
}
this.selVal = val;
}
}
}
</script>
2、js部分引进来,注册 , data里写数据,mothods写方法
import aSel from '@/components/comantd/antd_select'
components: {
aSel,
},
data:{
return {
/**
* 下拉数据
*/
allowClear:true,//下拉框是否需要删除
peojectOptions:[],//工程类型
bidsOptions:[],//标段类型
employeesOptions:[],//人员类型
companiesOptions:[],//企业类型
project_obj:{},//工程默认选中
bids_obj:{},//标段默认选中
employees_obj:{},//人员默认选中
companies_obj:{},//企业默认选中
}
},
methods:{
/**
* 下拉
*/
handleChangeGC(data){//工程
this.addPostData.project_no = data.key;//将值赋给我们的字段
this.getBidData(data.key);
},
}
3、template部分:
<aSel :Value='bids_obj' :options='bidsOptions' :allowClear='allowClear' @selectChange='handleChangeBT' :disabled='input_dis' :showArrow='!input_dis'></aSel></p>
更多:
点击进入官网: 官网入口
更多推荐
已为社区贡献102条内容
所有评论(0)