使用element-ui el-select 做下拉 全选+搜索 功能
有时候，需要用到下拉列表 全选和搜索，并且鼠标放入的时候有下拉列表展示。以前的做法是 check + el-input搜索结合做个组件，现在这个方法直接使用el-select 就能做到这个需求功能：有搜索+有全选+有取消+有确认请求+有鼠标移入自动展示功能(cv即食)文章来源：https://www.toymoban.com/news/detail-507371.html
文章来源地址https://www.toymoban.com/news/detail-507371.html
<template>
<div>
<div @mouseover="mouseOver">
<el-select
v-model="selValue"
placeholder="请选择"
filterable
multiple
collapse-tags
ref="refElSelect"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
<div class="selec_footer">
<el-button size="small" @click="checkAll">全选</el-button>
<el-button size="small" @click="cancel">取消</el-button>
<el-button size="small" @click="determine">确定</el-button>
</div>
</el-select>
</div>
<div>
{{ selValue }}
</div>
</div>
</template>
<script>
export default {
name: "",
components: {},
props: {},
data() {
return {
selValue: [],
options: [
{ label: "张三", value: 10 },
{ label: "李四", value: 11 },
{ label: "王五", value: 12 },
{ label: "赵六", value: 13 },
],
};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
// 鼠标滑入 自动展示下拉框
mouseOver() {
this.$refs.refElSelect.handleFocus();
},
// 全选
checkAll() {
if (this.selValue.length < this.options.length) {
// 全选
let valueList = this.options.map((x) => x.value);
this.selValue = valueList;
} else if (this.selValue.length === this.options.length) {
// 全不选
this.selValue = [];
}
},
// 关闭下拉框
cancel() {
this.$refs.refElSelect.handleClose();
},
// 请求数据并关闭下拉框
determine() {
this.$refs.refElSelect.handleClose();
},
},
};
</script>
<style scoped>
.selec_footer {
padding: 4px;
}
</style>
到了这里，关于使用element-ui el-select 做下拉 全选+搜索 功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
