本文介绍: 使用了Element UI库中的el–select和el–option组件来构建多选下拉框。同时,也包含了一个el-input组件用于过滤搜索选择项,以及el-checkbox–group和el-checkbox组件用于显示多选项。
使用了Element UI库中的el-select和el-option组件来构建多选下拉框。同时,也包含了一个el-input组件用于过滤搜索选择项,以及el-checkbox–group和el-checkbox组件用于显示多选项。
创建组件index.vue (src/common–ui/selectMultiple/index.vue)
<template>
<el-select
ref="select"
v-model="hValue"
multiple
collapse-tags
:clearable="clearable"
:disabled="disabled"
:placeholder="placeholder"
:popper-class="'select-default no-empty'"
:key="poperKeyValue"
:value-key="valueKey"
@blur="handleBlur"
@change="handleChange"
@clear="handleClear"
@focus="handleFocus"
@remove-tag="handleRemoveTag"
@visible-change="handleVisibleChange"
>
<el-input
class="filter-input"
v-model.trim="hFilterVal"
v-if="filterable"
:class="selectInfo.options.length == 0 ? 'filter-input-mb' : ''"
></el-input>
<el-checkbox-group v-model="hValue">
<el-option
v-for="(item, index) in selectInfo.options"
:key="index"
:label="
selectInfo.prop && selectInfo.prop.label
? item[selectInfo.prop.label]
: item.name
"
:disabled="item.disabled"
:value="
selectInfo.prop && selectInfo.prop.value
? item[selectInfo.prop.value]
: item.id
"
>
<el-checkbox
style="pointer-events: none"
:label="
selectInfo.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>
</template>
<script>
export 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.prop&&this.selectInfo.prop.value?this.selectInfo.prop.value:'id'
if(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);
}
}
};
</script>
<style lang="scss" scoped></style>
页面引入
<template>
<div>
<HSelectMultiple
:select-info="selectInfo"
v-model="selectedValue"
:filter-val="filterVal"
@input-search="dropDownSearchTop"
@change="changeSelect"
>
</HSelectMultiple>
</div>
</template>
<script>
import HSelectMultiplefrom '@/common-ui/selectMultiple/index'
export 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,并在项目中引入它们。
原文地址:https://blog.csdn.net/weixin_46328739/article/details/134736665
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_49352.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。