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-select
v-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>
文章来源地址https://www.toymoban.com/news/detail-698714.html
文章来源:https://www.toymoban.com/news/detail-698714.html
到了这里,关于el-select 支持多选 搜索远程数据 组件抽取的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!