vue3 表單搜索內容回顯到地址欄的實例代碼
更新時間：2023年09月14日 09:57:35 作者：飽飽~~
這篇文章主要介紹了vue3 表單搜索內容回顯到地址欄的實例代碼,地址欄輸入內容回顯到form表單,同理表單輸入內容也要回顯到地址欄中,本文結合實例代碼介紹的非常詳細,需要的朋友可以參考下
vue3 表單搜索內容回顯到地址欄
地址欄輸入內容回顯到form表單，同理表單輸入內容也要回顯到地址欄中
<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 || "",
};
});Vue3根據(jù)搜索框內容跳轉至本頁面指定位置
需求
需求：根據(jù)搜索框內容跳轉至本頁面指定位置
搜索框是我們在開發(fā)各類項目中出現(xiàn)率很高的一個"組件"，在element-plus中名為"自動補全輸入框"，即我們可以根據(jù)輸入的內容去檢索列表或者表格或者其他本頁面出現(xiàn)的元素，那我們應該如何去實現(xiàn)這個行為呢？
思路
整體過程是這樣的：點擊輸入框的內容，頁面跳轉至指定的內容位置
實現(xiàn)過程
①首先我們必須要在頁面中引入自動補全輸入框組件
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()
})需要解釋的是組件中的這個事件select 點擊選中建議項時觸發(fā)handleSelect 則是手動觸發(fā)選中建議事件
這一項是"點擊輸入框內容"
②根據(jù)選中的內容，在對應的表格中查找
const handleSelect = (item: RestaurantItem) => {
console.log(item)
}在這個函數(shù)中，我們可以log item，可以發(fā)現(xiàn)item就是loadAll中的內容，我們可以給loadAll里的內容都綁定一個id值，例如
{ id:1,value: 'vue', link: 'https://github.com/vuejs/vue' },然后我們在對應的表格的內容也添加一個id，這里就不舉例了，至此，我們可以判斷，如果loadAll里的id==表格里某一項的id，那就是我們需要的對象
for(let i=0;i<表格長度;i++){
let id = 表格[i].id
if (item.id == 表格[i].id) {
document.getElementById(id).scrollIntoView();
}③跳轉
document.getElementById(id).scrollIntoView();
整體的實現(xiàn)思路是：拿到搜索框選中的內容的id，與此同時給表格中的每一項內容都添加id，然后在select事件中，利用for循環(huán)去尋找搜索框id==表格內容id的對象，最后是利用scrollIntoView()方法進行跳轉
補充內容
需要補充的是，如何獲取到對應的元素？一是v-for循環(huán)，給每個對象添加id，格式是 v-for = value in 表格 :id="value.id" 二是通過綁定ref函數(shù)獲取
到此這篇關于vue3 表單搜索內容回顯到地址欄的文章就介紹到這了,更多相關vue3表單搜索內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue-cli axios請求方式及跨域處理問題,文中還給大家提到了vue中axios解決跨域問題和攔截器使用，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
vxe-table 是一個功能強大的 Vue 表格組件,它支持虛擬滾動列表作為其核心功能之一,本文主要介紹一下vxe-table的虛擬滾動列表功能的使用場景和優(yōu)勢,感興趣的可以了解下2023-12-12
Vue?2源碼解析ParseHTML函數(shù)HTML模板
這篇文章主要為大家介紹了Vue?2源碼解析ParseHTML函數(shù)HTML模板詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
正常情況下Vue推薦用props向子組件參數(shù),但是在特定場景下,使用$attrs會更方便,下面這篇文章主要給大家介紹了關于vue2.x中$attrs使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Electron-vue腳手架改造vue項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
Vue頁面內公共的多類型附件圖片上傳區(qū)域并適用折疊面板(示例代碼)
本文中實現(xiàn)的附件上傳區(qū)域支持超多類型附件分類型上傳，并且可根據(jù)特定條件具體展示某些類型的附件上傳，本文給大家分享Vue頁面內公共的多類型附件圖片上傳區(qū)域并適用折疊面板的示例代碼，需要的朋友參考下吧2021-12-12
這篇文章主要介紹了vue 地圖可視化 maptalks 篇，本文分步驟通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
由于在項目中需要對數(shù)據(jù)進行可視化處理,也就是用圖表展示,眾所周知echarts是非常強大的插件,所以這篇文章主要給大家介紹了關于vue+echarts圖表使用的相關資料,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細介紹了vue使用echarts實現(xiàn)地圖的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了vue 自定義icon的圖標的步驟，文中大概給大家分為兩步驟，通過實例圖文相結合給大家介紹的非常詳細,需要的朋友可以參考下2021-08-08