1、element select选择器文档
https://element.eleme.cn/#/zh-CN/component/select
2、效果如何:
3、将该功能封装成组件,代码如下:
<template>
<div class="courts-select">
<!-- 模糊搜索 -->
<el-select
v-model="filterValue"
clearable
filterable
remote
:placeholder="placeholder"
:remote-method="remoteMethod"
:no-data-text="noMatchText"
@change="filterChange"
:loading="loading"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.name"
:value="item.code"
>
</el-option>
</el-select>
</div>
</template>
<script>
import { listApi } from "@/api/systemManage.js";
var lodash = require("lodash");
export default {
name: "",
data() {
return {
options: [],
filterValue: "",
loading: false,
noMatchText: "暂无数据"
};
},
props: {
list: Array,
placeholder: {
type: String,
default: "请输入xxx"
}
},
methods: {
// 模糊搜索
remoteMethod: lodash.debounce(function (query) {
let resultAll = [];
if (query) {
this.loading = true;
this.list.forEach((item) => {
if (item.name.indexOf(query) >= 0) {
resultAll.push(item);
}
});
if (resultAll.length > 40) {
this.courtOptions = [];
this.noMatchText = "请输入详细的xxx";
this.loading = false;
} else if (resultAll.length === 0) {
this.noMatchText = "暂无数据";
this.loading = false;
} else {
this.options = resultAll;
this.loading = false;
}
}
}, 300),
// 树的模糊查询选择
filterChange(e) {
this.$emit("getSelectedCourt", e);
this.filterValue = e;
this.options = [];
}
}
};
</script>
4、组件的引入和使用
<courtsSelect :list="list" @getSelectedCourt="getSelectedCourt"></courtsSelect>
getSelectedCourt(e) {
this.xxx = e
},