支持搜索

2c2c2c
1 parent 8d8c50ea
Showing 1 changed file with 18 additions and 2 deletions
src/views/schedulingAssociateNum/Attendance/scheduling/index.vue
 <template>
   <div>
-    <el-select v-model="childrenItemValue" value-key="id" placeholder="选着考勤规则" @change="handleUpdate">
+    <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>
@@ -20,10 +20,26 @@ const props = defineProps({
     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