视频网站开发分析,深圳华强北今晚,网站建设 长期待摊,龙华建设发展有限公司网站使用了Element UI库中的el-select和el-option组件来构建多选下拉框。同时#xff0c;也包含了一个el-input组件用于过滤搜索选择项#xff0c;以及el-checkbox-group和el-checkbox组件用于显示多选项。 创建组件index.vue (src/common-ui/selectMultiple/index.vue)
tem… 使用了Element UI库中的el-select和el-option组件来构建多选下拉框。同时也包含了一个el-input组件用于过滤搜索选择项以及el-checkbox-group和el-checkbox组件用于显示多选项。 创建组件index.vue (src/common-ui/selectMultiple/index.vue)
templateel-selectrefselectv-modelhValuemultiplecollapse-tags:clearableclearable:disableddisabled:placeholderplaceholder:popper-classselect-default no-empty:keypoperKeyValue:value-keyvalueKeyblurhandleBlurchangehandleChangeclearhandleClearfocushandleFocusremove-taghandleRemoveTagvisible-changehandleVisibleChangeel-inputclassfilter-inputv-model.trimhFilterValv-iffilterable:classselectInfo.options.length 0 ? filter-input-mb : /el-inputel-checkbox-group v-modelhValueel-optionv-for(item, index) in selectInfo.options:keyindex:labelselectInfo.prop selectInfo.prop.label? item[selectInfo.prop.label]: item.name:disableditem.disabled:valueselectInfo.prop selectInfo.prop.value? item[selectInfo.prop.value]: item.idel-checkboxstylepointer-events: none:labelselectInfo.prop selectInfo.prop.value? item[selectInfo.prop.value]: item.id{{selectInfo.prop selectInfo.prop.label? item[selectInfo.prop.label]: item.name}}/el-checkbox/el-option/el-checkbox-group/el-select
/templatescriptexport default {name: HSelectMul,props: {placeholder: String,selectInfo: {type: Object,default() {return {align: left,options: [],filterOptions: [],prop:{label:name,value:id}};}},filterVal:{type:String,value:},clearable: {type: Boolean,default: true},disabled: {type: Boolean,default: false},filterable: {type: Boolean,default: true},value: {type: [String, Number, Array, Boolean],required: true},valueKey: String,keyValue: {type: String,default: select-single}},data() {return {poperKeyValue: };},computed: {hValue: {get() {let value [];if (this.value instanceof Array) {this.value.forEach(key {if (this.checkValueExisting(key)) {value.push(key);}});}return value;},set(value) {this.$emit(input, value);}},hFilterVal: {get() {return this.filterVal;},set(value) {this.$emit(input-search, value);}},},watch: {keyValue(val) {this.poperKeyValue val;}},methods: {checkValueExisting(value) {let key this.selectInfo.propthis.selectInfo.prop.value?this.selectInfo.prop.value:idif(this.filterable) {if (this.selectInfo.filterOptions instanceof Array) {let index this.selectInfo.filterOptions.findIndex(item item[key] value,this);return index -1;}} else {if (this.selectInfo.options instanceof Array) {let index this.selectInfo.options.findIndex(item item[key] 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);}}};
/scriptstyle langscss scoped/style
页面引入
在需要使用selectMultiple组件的地方通过import语句组件注册并使用 templatedivHSelectMultiple:select-infoselectInfov-modelselectedValue:filter-valfilterValinput-searchdropDownSearchTopchangechangeSelect/HSelectMultiple/div
/template
scriptimport HSelectMultiplefrom /common-ui/selectMultiple/indexexport default {components: {HSelectMultiplefrom },data() {return {filterVal: ,dataSource: [],selectedValue: ,selectInfo: {align: left,options: [],filterOptions: [],prop: {label: name,value: id}},}},methods: {changeSelect(val, field, parentField, info) {this.selectInfo.chooseSelectList [];for (let i 0; i this.selectInfo.filterOptions.length; i) {for (let j 0; j val.length; j) {let value this.selectInfo.prop this.selectInfo.prop.value ? this.selectInfo.prop.value : id;if (val[j] this.selectInfo.filterOptions[i][value]) {this.selectInfo.chooseSelectList.push(this.selectInfo.filterOptions[i]);}}}console.log(val, 选择的值)},dropDownSearchTop(val) {this.filterVal this.selectInfo.filterVal;if (this.selectInfo.filterVal ) {this.selectInfo.options JSON.parse(JSON.stringify(this.selectInfo.filterOptions));return;}let list [];if (this.selectInfo.chooseSelectList.length 0) {list this.selectInfo.filterOptions.filter(item {let value ithis.selectInfonfo.prop this.selectInfo.prop.value ? this.selectInfo.prop.value : id;return this.selectInfo.chooseSelectList.every(el el[value] ! item[value]);});} else {list JSON.parse(JSON.stringify(this.selectInfo.filterOptions));}this.selectInfo.options this.selectInfo.chooseSelectList.concat(list.filter(item {let name this.selectInfo.prop this.selectInfo.prop.label ? this.selectInfo.prop.label : name;return item[name].includes(this.selectInfo.filterVal);}));},}// ...}
/script确保你已经安装了Vue.js和Element UI并在项目中引入它们。
