组件（模糊查询数据select下拉表单）

<template>
  <div>
    <el-form ref="Ref" :model="Form" :rules="rulesForm" :disabled="zjdisabled" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item prop="mzh" label="门诊号：">
            <el-select @change="(value) => handleSelect(value, 'mzh')" v-model="Form.mzh" filterable remote
              placeholder="请选择门诊号" :remote-method="(query) => remoteMethod(query, 'mzh')" :loading="loading">
              <el-option v-for="item in options" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="zyh" label="住院号：">
            <el-select @change="(value) => handleSelect(value, 'zyh')" v-model="Form.zyh" filterable remote
              placeholder="请输入住院号" :remote-method="(query) => remoteMethod(query, 'zyh')" :loading="loading">
              <el-option v-for="item in zyhoptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="xm" label="姓名：">
            <el-select @change="(value) => handleSelect(value, 'xm')" v-model="Form.xm" filterable remote
              placeholder="请输入姓名" :remote-method="(query) => remoteMethod(query, 'xm')" :loading="loading">
              <el-option v-for="item in xmoptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider style="margin:10px" />
  </div>
</template>

<script setup>

const { proxy } = getCurrentInstance();
const data = reactive({
  Form: {
    mzh: "",
    zyh: "",
    xm: "",
  },
  rulesForm: {
    mzh: [{ required: true, message: "门诊号不可为空", trigger: "blur" }],
    xm: [{ required: true, message: "姓名不可为空", trigger: "blur" }],
    zyh: [{ required: true, message: "住院号不可为空", trigger: "blur" }],
  },
});
const options = ref([])
const xmoptions = ref([])
const zyhoptions = ref([])
const loading = ref(false)
const { Form, rulesForm, } = toRefs(data);
const emit = defineEmits(["childChange"]);
const handleSelect = async (value, flag) => {
  if (!value) return
  const { data: res } = await proxy.$postRequest(
    "hzxx/selectHzByFlag",
    {
      flag: flag,
      val: value
    }
  );
  if (res.status == 200) {
    const { mzh, zyh, xm } = res.data;
    Form.value.zyh = zyh;
    Form.value.xm = xm;
    Form.value.mzh = mzh;
  } else {
    proxy.$message.error(res.msg);
  }
  // 必须经过defineEmits声明，不然方法无效！
  emit("childChange", Form.value);
};
watch(props, (val) => {
  Form.value = val.data
}, { deep: true })
const props = defineProps({
  data: {
    type: Object,
    default: "",
  },
  zjdisabled: {
    type: Boolean,
    default: false,
  },
});
const zjdisabled = props.zjdisabled
//根据门诊号-住院号-姓名查找患者列表
const remoteMethod = async (query, flag) => {
  if (!query) return
  const { data: res } = await proxy.$postRequest(
    "hzxx/selectHzOptionList",
    {
      flag: flag,
      val: query
    }
  );
  if (res.status == 200) {
    if (flag == 'mzh') {
      options.value = res.data
    }
    if (flag == 'zyh') {
      zyhoptions.value = res.data
    }
    if (flag == 'xm') {
      xmoptions.value = res.data
    }
  } else {
    proxy.$message.error(res.msg);
  }
}
</script>

<style  scoped>
</style>