import { defineComponent, reactive, ref, onMounted } from 'vue'
|
import { CaretBottom } from '@element-plus/icons-vue'
|
import Option from './Option'
|
import { Base } from '@/libs/Base/Base'
|
const request = Base.request
|
|
export default defineComponent({
|
props: ['disabled', 'options', 'urlConfig'],
|
setup(props: any, { attrs, slots, emit }: any) {
|
const options = ref([])
|
|
const dataObj = reactive({
|
loading: false,
|
})
|
|
const remoteMethod = async (query?: string) => {
|
dataObj.loading = true
|
const params = {
|
...props.urlConfig.params,
|
Filter: query || '',
|
}
|
const str = new URLSearchParams(params).toString()
|
const res = await request.get(`${props.urlConfig.url}?${str}`)
|
//extend类扩展属性后端只传收字符串
|
options.value = props.urlConfig.optionString
|
? res.map((item: any) => ({ ...item, value: String(item.value) }))
|
: res
|
dataObj.loading = false
|
}
|
|
onMounted(() => {
|
remoteMethod()
|
})
|
|
return () => {
|
const disabled =
|
typeof props.disabled?.value === 'boolean'
|
? props.disabled?.value
|
: (props.disabled as boolean)
|
return (
|
<el-select
|
{...attrs}
|
filterable
|
remote
|
disabled={disabled}
|
remote-method={remoteMethod}
|
loading={dataObj.loading}
|
>
|
{options.value
|
? options.value.map((item: any) => {
|
const label = item.label || item.name || item.description
|
return <Option {...item} label={label} />
|
})
|
: slots.default?.()}
|
</el-select>
|
)
|
}
|
},
|
})
|
