效果

組件源碼

<template><div class="search"><el-select v-model="type" @change="changeType" class="select"><el-option v-for="item in selectItems":key="item.value":lable="item.label":value="item.value"></el-option></el-select><div class='search-input'><el-input :placeholder="placeholderDes" v-model="searchValue"></el-input></div><el-button icon="el-icon-search" @click="search"></el-button></div> </template><script> export default {data () {return {searchValue: '',type: ''}},created () {this.type = this.initType},props: {selectItems: {type: Array,require: true},placeholderDes: {type: String,require: true},initType: {type: String,require: true}},methods: {changeType (newType) {this.$emit('changeType', newType)},search () {this.$emit('searchOk', this.searchValue)}} } </script><style lang="less" scoped> .search {display: flex;.el-select {width: 90px;height: 40px;box-sizing: border-box;border-right: none;border-radius: 0;background-color: #DDF0FE;border: 1px solid #40b0ff;}.search-input {width: 216px;height: 40px;border: 1px solid #40b0ff;border-left: none;box-sizing: border-box;font-family: 'MicrosoftYaHei';font-size: 14px;color: #909399;border-radius: 0;}.el-button {width: 44px;height: 40px;padding: 0;border: 1px solid #40b0ff;border-radius: 0;color: #fff;background: #40b0ff;&:hover {background: #10b0ff}} } </style>

父組件中的引用

<template><div class="test"><v-search :initType="initType" :selectItems="selectItems" :placeholderDes="placeholderDes" @changeType="changeType" @searchOk="searchOk"></v-search></div> </template><script> import VSearch from '@/components/Common/ZLGComponents/XGQTest/Search/Search' export default {data () {return {selectItems: [],selectStatus: 'devname',initType: '',placeholderDes: '請輸入要搜索的測試名稱'}},created () {this.setSelectItems()this.setInitType()},methods: {setSelectItems () {this.selectItems = [{value: '測試名',label: '測試名'}, {value: '測試ID',label: '測試ID'}]},changeType (newType) {if (newType === '測試名') {this.placeholderDes = '請輸入要搜索的測試名稱'this.selectStatus = 'name'} else if (newType === '測試ID') {this.placeholderDes = '請輸入要搜索的測試ID'this.selectStatus = 'id'}},searchOk (value) {console.log(this.selectStatus)console.log(value)// 調(diào)用你的搜索接口，搜索條件為搜索的類型 + 搜索值// yourSearch (this.selectStatus, value)},setInitType () {this.initType = '測試名'}},components: {VSearch} } </script><style lang="less" scoped> </style>

組件基于element-UI的二次封裝，適合用于使用element的項目，子組件父組件demo完整源碼如上所示，有疑問建議研究一下源碼，也歡迎留言交流。

總結

以上是生活随笔為你收集整理的Vue2.x通用条件搜索组件的封装及应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。