网站资源建设,网站优化工作室,做的好的网站欣赏,怎么建立图片的网站基于Element UI的el-select组件进行封装的。该组件实现了一个下拉选择框#xff0c;具有许多可配置的属性和事件 创建组件index.vue (src/common-ui/select/index.vue)
templateel-selectrefselectv-modelhValue:allow-createallo… 基于Element UI的el-select组件进行封装的。该组件实现了一个下拉选择框具有许多可配置的属性和事件 创建组件index.vue (src/common-ui/select/index.vue)
templateel-selectrefselectv-modelhValue:allow-createallowCreate:autocompleteautocomplete:automatic-dropdownautomaticDropdown:clearableclearable:collapse-tagscollapseTags:default-first-optiondefaultFirstOption:disableddisabled:filter-methodfilterMethod:filterablefilterable:loadingloading:loading-textloadingText:multiplemultiple:multiple-limitmultipleLimit:namename:no-match-textnoMatchText:no-data-textnoDataText:placeholderplaceholder:popper-classpopperClass:popper-append-to-bodypopperAppendToBody:remoteremote:remote-methodremoteMethod:reserve-keywordreserveKeyword:sizesize:keypoperKeyValue:value-keyvalueKeyblurhandleBlurchangehandleChangeclearhandleClearfocushandleFocusremove-taghandleRemoveTagvisible-changehandleVisibleChangeslot nameprefix slotprefix/slotslot nameoption-contenttemplate v-for(item, index) in dataSourceel-option-groupv-ifitem[hProps.options] item[hProps.options].length 0 !selectSpecial:keyindex:labelitem[hProps.label]:disableditem[hProps.disabled]el-optionv-for(option, subIndex) in item[hProps.options]:keysubIndex:labeloption[hProps.label]:valueoption[hProps.value]:disabledoption[hProps.disabled]/el-option/el-option-groupel-optionv-else-if!item[hProps.options] !selectSpecial:keyindex si:labelitem[hProps.label]:valueitem[hProps.value]:disableditem[hProps.disabled]/el-optionel-optionv-else-if!item[hProps.options] selectSpecial:keyindex sp:label${item[hProps.label]}(${item[selectSpecial]}):valueitem[hProps.value]:disableditem[hProps.disabled]/el-option/template/slot/el-select
/templatescript
export default {name: HSelect,props: {allowCreate: {type: Boolean,default: false},selectSpecial: {type: String,default: },autocomplete: String,automaticDropdown: {type: Boolean,default: false},clearable: {type: Boolean,default: true},collapseTags: {type: Boolean,default: false},dataSource: Array,defaultFirstOption: {type: Boolean,default: false},disabled: {type: Boolean,default: false},filterMethod: Function,filterable: {type: Boolean,default: true},loading: {type: Boolean,default: false},loadingText: String,multiple: {type: Boolean,default: false},multipleLimit: Number,name: String,noMatchText: String,noDataText: String,placeholder: String,popperClass: {type: String,default: select-default},popperAppendToBody: {type: Boolean,default: true},remote: {type: Boolean,default: false},remoteMethod: Function,reserveKeyword: {type: Boolean,default: false},size: {type: String,validator (value) {return [medium, small, mini].indexOf(value) ! -1}},value: {type: [String, Number, Array, Boolean],required: true},valueKey: String,props: {type: Object,default () {return {}}},keyValue: {type: String,default: select-single},align:{type: String,default: center}},data () {return {poperKeyValue: }},computed: {hValue: {get () {let value nullif (this.multiple) {value []if (this.value instanceof Array) {this.value.forEach(key {if (this.checkValueExisting(key)) {value.push(key)}})}} else {value if (this.checkValueExisting(this.value)) {value this.value}}return value},set (value) {this.$emit(input, value)}},hProps () {return {label: name,value: id,disabled: disabled,options: options,...this.props}}},watch: {keyValue (val) {this.poperKeyValue val}},methods: {checkValueExisting (value) {if (this.allowCreate) {return value} else {if (this.dataSource instanceof Array) {let index this.dataSource.findIndex(item item[this.hProps.value] value,this)return index -1}return false}},handleBlur (event) {this.$emit(blur, event)},handleChange (value) {this.$emit(change, value)},handleClear () {this.$emit(clear)},handleFocus (event) {this.$emit(focus, event)},handleRemoveTag (tag) {this.$emit(remove-tag, tag)},handleVisibleChange (visible) {this.$emit(visible-change, visible)},focus () {this.$refs.select.focus()},blur () {this.$refs.select.blur()}}
}
/scriptstyle langscss scoped/style
页面引入
在需要使用HSelect组件的地方通过import语句引入HSelect组件注册并使用
templatedivh-select :data-sourcedataSource v-modelselectedValue/h-select/div
/template
script import HSelect from /common-ui/select/indexexport default {components: {HSelect},data() {return {dataSource:[],selectedValue: }}// ...}
/script确保你已经安装了Vue.js和Element UI并在项目中引入它们。
