<template>
<el-select
class="lomoreSelect"
v-model="activityList" filterable placeholder="请选择意向车型" :collapse-tags="true" multiple
:filter-method="filterMethod" clearable
@visible-change="handleVisibleChange"
ref="multiSelect">
<el-option
v-for="item in filteredOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
import { xtgDropdownModels } from '@/views/starManagement/api/invite.js'
export default {
name: 'carSelect',
props: {
value: {
type: Array,
default: () => []
}
},
data() {
return {
filterText: '',
disabledLoad: false,
remoteLoading: false,
submitLoading: false,
loading: false,
name: undefined,
pageNum: 1,
pageSize: 10,
options: []
}
},
computed: {
activityList: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
},
filteredOptions() {
if (!this.filterText) return this.options
const result = this.options.filter(item =>
item.label.toLowerCase().includes(this.filterText.toLowerCase())
)
return result
}
},
mounted() {
this.init()
},
methods: {
filterMethod(query) {
this.filterText = query
},
handleVisibleChange(visible) {
if (visible) {
this.$refs.multiSelect.query = ''
this.filterText = ''
}
},
init() {
this.getList()
},
async getList() {
const res = await xtgDropdownModels({})
this.options = res.data.map(item => {
return {
value: item.productCategoryCode,
label: item.productCategoryName
}
})
}
}
}
</script>
<style lang="scss" scoped>
.lomoreSelect{
width: 215px !important;
/deep/ .el-select__caret:first-child::before {
content: "\e6e1";
}
/deep/ .is-focus {
.el-select__caret:first-child {
transform: rotateZ(0deg);
}
}
}
</style>
<carSelect v-model="form.intentionModelList" slot="6"></carSelect>
form: {
intentionModelList: [],
}