el-select 支持多选 搜索远程数据 组件抽取

el-select 支持多选 搜索远程数据 组件抽取

• 使用方式

import selectView from './components/selectView'<el-form><el-form-item label="选择器"><selectView v-model="selValue" @change="handleChange"></el-form-item>
</el-form>

• 组件

 <template><el-selectv-model="selectValue":multiple="multiple":filterable="true":remote="true"@focus="selectFocus":clearable="true":placeholder="placeholder":remote-method="remoteMethod":loading="selectLoading"@change="handleChange"style="width: 100%;"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select>
</template>
<script>
import { userListAll } from "@/utils/api.js";
export default {props: {// v-model绑定 返回 1,2,3 或 传入 1,2,3 id值value: {type: [String, Number],default: "",},placeholder: {type: String,default: "请选择",},multiple: {type: Boolean,default: true,},},computed: {currentValue: {get: function() {if (this.value) {return this.value.split(",");}return [];},set: function(val) {this.$emit("input", val.join(","));},},},data() {return {selectValue: "",options: [], //存储下拉框的数据selectEnterpriseForm: {nickName: "",},selectLoading: false,};},mounted() {this.selectEnterprise("");},methods: {selectEnterprise(query) {//query用户搜索的值this.selectEnterpriseForm = this.$options.data().selectEnterpriseForm; //清空数据this.selectEnterpriseForm.nickName = query;userListAll({...this.selectEnterpriseForm,}).then(res => {this.options = [];this.selectLoading = false;this.addLoading = false;res.data.forEach(element => {this.options.push({value: element.userId + "",label: element.nickName,});});if (this.currentValue.length > 0) {this.selectValue = this.currentValue;}}).catch(err => {});},remoteMethod(query) {this.selectLoading = true;this.selectEnterprise(query);},selectFocus() {this.options = [];this.selectLoading = true;this.selectEnterprise("");},handleChange(val) {this.currentValue = val;let nameList = [];val.forEach(item => {this.options.forEach(element => {if (item == element.value) {nameList.push(element.label);}});});// 将1,2,3 和 张三,李四,王五 返回this.$emit("change", val.join(","), nameList.join(","));},},
};
</script>
<style lang="scss" scoped>
// .con {
// 	display: inline-block;
// 	width: 100%;
// }
</style>