温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue2.x中怎么实现一个条件搜索组件

发布时间:2021-08-12 11:59:16 来源:亿速云 阅读:211 作者:Leah 栏目:web开发

这篇文章将为大家详细讲解有关Vue2.x中怎么实现一个条件搜索组件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

组件源码

<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)
  // 调用你的搜索接口,搜索条件为搜索的类型 + 搜索值
  // yourSearch (this.selectStatus, value)
 },
 setInitType () {
  this.initType = '测试名'
 }
 },
 components: {
 VSearch
 }
}
</script>

<style lang="less" scoped>
</style>

关于Vue2.x中怎么实现一个条件搜索组件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI