快捷導(dǎo)航

vue3 表單搜索內(nèi)容回顯到地址欄的實(shí)例代碼

更新時(shí)間：2023年09月14日 09:57:35 作者：飽飽~~

這篇文章主要介紹了vue3 表單搜索內(nèi)容回顯到地址欄的實(shí)例代碼,地址欄輸入內(nèi)容回顯到form表單,同理表單輸入內(nèi)容也要回顯到地址欄中,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

vue3 表單搜索內(nèi)容回顯到地址欄

地址欄輸入內(nèi)容回顯到form表單，同理表單輸入內(nèi)容也要回顯到地址欄中

<el-form :model="data">
    <el-form-item label="ORCHID:">
        <el-input
            type="text"
            v-model="data.orchId"
            placeholder="請(qǐng)輸入ORCHID"
            @keyup.enter="handleSearch"
            clearable
          />
        </el-form-item>
    <el-form-item label="TASKID:">
        <el-input
            type="text"
            v-model="data.taskId"
            placeholder="請(qǐng)輸入TASKID"
            @keyup.enter="handleSearch"
            clearable
          />
        </el-form-item>
    <el-form-item label="WORKFLOWID:">
        <el-input
            type="text"
            v-model="data.workflowId"
            placeholder="請(qǐng)輸入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"
              >查詢(xún)</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 || "",
  };
});

Vue3根據(jù)搜索框內(nèi)容跳轉(zhuǎn)至本頁(yè)面指定位置

需求

需求：根據(jù)搜索框內(nèi)容跳轉(zhuǎn)至本頁(yè)面指定位置

搜索框是我們?cè)陂_(kāi)發(fā)各類(lèi)項(xiàng)目中出現(xiàn)率很高的一個(gè)"組件"，在element-plus中名為"自動(dòng)補(bǔ)全輸入框"，即我們可以根據(jù)輸入的內(nèi)容去檢索列表或者表格或者其他本頁(yè)面出現(xiàn)的元素，那我們應(yīng)該如何去實(shí)現(xiàn)這個(gè)行為呢？

element-plus自動(dòng)補(bǔ)全輸入框

思路

整體過(guò)程是這樣的：點(diǎn)擊輸入框的內(nèi)容，頁(yè)面跳轉(zhuǎn)至指定的內(nèi)容位置

實(shí)現(xiàn)過(guò)程

①首先我們必須要在頁(yè)面中引入自動(dòng)補(bǔ)全輸入框組件

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()
})

需要解釋的是組件中的這個(gè)事件select 點(diǎn)擊選中建議項(xiàng)時(shí)觸發(fā)handleSelect 則是手動(dòng)觸發(fā)選中建議事件

這一項(xiàng)是"點(diǎn)擊輸入框內(nèi)容"

②根據(jù)選中的內(nèi)容，在對(duì)應(yīng)的表格中查找

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

在這個(gè)函數(shù)中，我們可以log item，可以發(fā)現(xiàn)item就是loadAll中的內(nèi)容，我們可以給loadAll里的內(nèi)容都綁定一個(gè)id值，例如

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

然后我們?cè)趯?duì)應(yīng)的表格的內(nèi)容也添加一個(gè)id，這里就不舉例了，至此，我們可以判斷，如果loadAll里的id==表格里某一項(xiàng)的id，那就是我們需要的對(duì)象

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

③跳轉(zhuǎn)

document.getElementById(id).scrollIntoView();

整體的實(shí)現(xiàn)思路是：拿到搜索框選中的內(nèi)容的id，與此同時(shí)給表格中的每一項(xiàng)內(nèi)容都添加id，然后在select事件中，利用for循環(huán)去尋找搜索框id==表格內(nèi)容id的對(duì)象，最后是利用scrollIntoView()方法進(jìn)行跳轉(zhuǎn)