vue?elementui?實現(xiàn)搜索欄子組件封裝的示例代碼
前言
描述: 在基本項目中搜索欄、分頁組件格式樣式幾乎是固定的,只是對應(yīng)的數(shù)據(jù)不同,由于模塊會隨著需求的不斷增加,可能會導(dǎo)致重復(fù)代碼越來越多,這時可以用到子組件,需要將相同的模塊代碼統(tǒng)一封裝,提高開發(fā)效率和頁面統(tǒng)一。(自己的想法,只根據(jù)自己需求來說)
需求
實現(xiàn)
子組件(search.vue)
html
<template> <div class="search-main"> <!-- 下拉框 --> <el-select class="com com-margin" v-model="objSearch.searchType" filterable placeholder="請選擇" > <el-option v-for="item in objSearch.searchKeyOptions" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> <!-- 搜索值 --> <el-input class="com" v-model="objSearch.searchValue" placeholder="請輸入搜索值" ></el-input> <!-- 下拉框 --> <el-cascader class="com" :options="objSearch.options" :props="{ checkStrictly: true }" clearable :placeholder="objSearch.placeholder" v-model="objSearch.status" ></el-cascader> <el-button @click="search" type="primary" icon="el-icon-search" >搜索</el-button > <el-button @click="refresh" type="primary" icon="el-icon-refresh" >刷新</el-button > <el-button type="primary" icon="el-icon-document" @click="exportExcel" >導(dǎo)出EXCEL</el-button > <el-button class="total" type="primary" icon="el-icon-files" >{{ objSearch.name }}總數(shù):{{ objSearch.total }}{{ objSearch.unit }}</el-button > </div> </template>
js
<script> export default { name: 'Search', // 接收父組件對象 props: { objSearch: { type: Object, default: null } }, methods: { // 搜索 search () { let obj = { searchType: this.objSearch.searchType, searchValue: this.objSearch.searchValue, status: this.objSearch.status } this.$emit('search', obj) }, // 刷新 refresh () { this.$emit('refresh') }, // 導(dǎo)出 exportExcel () { this.$emit('exportExcel') } } } </script>
css
<style scoped> .search-main { width: 100%; line-height: 4rem; } .com { width: 10rem; } .com-margin { margin-left: 1rem; } .total { float: right; margin-top: 1rem; } </style>
父組件部分主要代碼(index.vue)
html(主要代碼)
Search 指components注冊的標簽。
:objSearch 指向子組件傳的參數(shù)
@refresh、@exportExcel、@search 指子組件觸發(fā)的方法
<div class="device-sensor-main"> <!--使用Search子組件 refresh 方法是刷新,exportExcel 方法是導(dǎo)出,search 方法是搜索 --> <div class="search"> <Search :objSearch="objSearch" @refresh="refresh" @exportExcel="exportExcel" @search="search" ></Search> </div> </div>
js(主要代碼)
<script> // 引用搜索模塊子組件 import Search from '@/components/search' export default { name: 'SensorList', // 注冊 components: { Search }, data () { return { // 搜索模塊 objSearch: { searchKeyOptions: [ { label: '傳感器編號', value: 'sensorImei' }, { label: '設(shè)備IMEI號', value: 'imei' }, { label: '醫(yī)院名稱', value: 'hospitalName' } ], searchType: 'sensorImei', searchValue: '', name: '設(shè)備', unit: '臺', total: 0, placeholder: '傳感器狀態(tài)', options: [], status: [] } } }, methods: { // 搜索 obj就是子組件傳過來的對象 search (obj) { console.log('子組件搜索返回數(shù)據(jù):', obj) }, // 刷新 refresh () { console.log('刷新') }, // 導(dǎo)出 exportExcel () { console.log('導(dǎo)出') } } } </script>
css
<style scoped> .search { width: 100%; height: 4rem; } .footer { text-align: center; } .el-table .el-table__cell { padding: 0.3rem 0; } </style>
到此這篇關(guān)于vue elementui 搜索欄子組件封裝的文章就介紹到這了,更多相關(guān)vue elementui 搜索欄組件封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問題
這篇文章主要介紹了完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問題,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10vue antd的from表單中驗證rules中type的坑記錄
這篇文章主要介紹了vue antd的from表單中驗證rules中type的坑記錄,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04Vue中判斷語句與循環(huán)語句基礎(chǔ)用法及v-if和v-for的注意事項詳解
在Vue指令中,最經(jīng)常被用于做邏輯操作的指令,下面這篇文章主要給大家介紹了關(guān)于Vue中判斷語句與循環(huán)語句基礎(chǔ)用法及v-if和v-for注意事項的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-08-08Vue中構(gòu)造數(shù)組數(shù)據(jù)之map和forEach方法實現(xiàn)
數(shù)組操作是前端最重要的數(shù)據(jù)操作,構(gòu)造數(shù)組數(shù)據(jù),又是數(shù)組操作中很常見的,本文將梳理下map和forEach方法在Vue項目中的使用,感興趣的朋友跟隨小編一起看看吧2022-09-09