index.vue
1.59 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<template>
<div>
<el-select v-model="childrenItemValue" value-key="id" placeholder="选着考勤规则" @change="handleUpdate" remote remote-method="remoteMethod" :loading="loading" filterable style="width: 300px">
<el-option v-for="item in schedulingOptions" :key="item.id" :label="item.ruleName + '(' + item.rangeTime + ')'"
:value="item" />
</el-select>
</div>
</template>
<script name="schedulingAdd" setup>
// const { proxy } = getCurrentInstance();
// emit("update:modelValue", listToString(fileList.value));
const props = defineProps({
schedulingNowValue: {
require: false
},
schedulingOptions: {
require: true
}
})
const loading = ref(false);
const options = ref([])
const childrenItemValue = ref(props.schedulingNowValue)
const getOptions = (query) => {
return props.schedulingOptions.filter(item => item.ruleName.toLowerCase().includes(query.toLowerCase()));
}
const handleUpdate = (val) => {
}
const remoteMethod = (query) => { // query是输入的关键词
if (query !== '') {
loading.value = true; // 开始加载数据时设置loading为true
// 模拟异步获取数据，实际应用中应该是调用API获取数据
setTimeout(() => {
options.value = getOptions(query); // 获取数据后更新options和loading状态
loading.value = false; // 数据加载完成，设置loading为false
}, 200); // 假设200ms后获取到数据，实际应用中应该是根据API响应时间来调整这个值。
} else {
this.options = []; // 如果查询为空，则清空选项列表。
}
}
defineExpose({
childrenItemValue
});
</script>