vue3 表单搜索内容回显到地址栏的实例代码

<el-form :model="data">
    <el-form-item label="ORCHID:">
        <el-input
            type="text"
            v-model="data.orchId"
            placeholder="请输入ORCHID"
            @keyup.enter="handleSearch"
            clearable
          />
        </el-form-item>
    <el-form-item label="TASKID:">
        <el-input
            type="text"
            v-model="data.taskId"
            placeholder="请输入TASKID"
            @keyup.enter="handleSearch"
            clearable
          />
        </el-form-item>
    <el-form-item label="WORKFLOWID:">
        <el-input
            type="text"
            v-model="data.workflowId"
            placeholder="请输入WORKFLOWID"
            @keyup.enter="handleSearch"
            clearable
          />
    </el-form-item>
        <div>
          <el-form-item>
            <el-button class="btn-demo-item" @click="handleReset">重置</el-button>
            <el-button class="btn-demo-item" type="primary" @click="handleSearch"
              >查询</el-button
            >
          </el-form-item>
        </div>
    </el-form>

import { ref, watchEffect } from "vue";
import { useRoute, useRouter } from "vue-router";
let props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
});
const data = ref({
  orchId: props.modelValue.orchId ?? "",
  taskId: props.modelValue.taskId ?? "",
  workflowId: props.modelValue.workflowId ?? "",
});
const route = useRoute();
const router = useRouter();
let emit = defineEmits(["search"]);
const handleReset = () => {
  resetForm(data.value);
  handleSearch();
};
const handleSearch = () => {
  router.push({ query: { ...route.query, ...data.value } });
  emit("search", data.value);
};
watchEffect(() => {
  data.value = {
    orchId: route.query.orchId || "",
    taskId: route.query.taskId || "",
    workflowId: route.query.workflowId || "",
  };
});

template部分
<el-autocomplete v-model="state1" :fetch-suggestions="querySearch" class="inline-input w-50"
	placeholder="搜索" @select="handleSelect" @change='change'>
</el-autocomplete>
srcipt部分
import { onMounted, ref } from 'vue'
interface RestaurantItem {
  value: string
  link: string
}
const state1 = ref('')
const restaurants = ref<RestaurantItem[]>([])
const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value
  // call callback function to return suggestions
  cb(results)
}
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}
const loadAll = () => {
  return [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'element', link: 'https://github.com/ElemeFE/element' },
    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
    { value: 'babel', link: 'https://github.com/babel/babel' },
  ]
}
const handleSelect = (item: RestaurantItem) => {
  console.log(item)
}
onMounted(() => {
  restaurants.value = loadAll()
})

const handleSelect = (item: RestaurantItem) => {
  console.log(item)
}

 { id:1,value: 'vue', link: 'https://github.com/vuejs/vue' },

for(let i=0;i<表格长度;i++){
	let id = 表格[i].id
	if (item.id == 表格[i].id) {
	document.getElementById(id).scrollIntoView();
	}

document.getElementById(id).scrollIntoView();