前言

描述： 在基本项目中搜索栏、分页组件格式样式几乎是固定的，只是对应的数据不同，由于模块会随着需求的不断增加，可能会导致重复代码越来越多，这时可以用到子组件，需要将相同的模块代码统一封装，提高开发效率和页面统一。(自己的想法，只根据自己需求来说)

需求

实现

子组件(search.vue)

html

<template><div class="search-main"><!-- 下拉框 --><el-selectclass="com com-margin"v-model="objSearch.searchType"filterableplaceholder="请选择"><el-optionv-for="item in objSearch.searchKeyOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select><!-- 搜索值 --><el-inputclass="com"v-model="objSearch.searchValue"placeholder="请输入搜索值"></el-input><!-- 下拉框 --><el-cascaderclass="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">导出EXCEL</el-button><el-button class="total" type="primary" icon="el-icon-files">{{ objSearch.name }}总数:{{ 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')},// 导出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 指向子组件传的参数
@refresh、@exportExcel、@search 指子组件触发的方法

<div class="device-sensor-main"><!--使用Search子组件 refresh 方法是刷新，exportExcel 方法是导出，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: '设备IMEI号', value: 'imei' },{ label: '医院名称', value: 'hospitalName' }],searchType: 'sensorImei',searchValue: '',name: '设备',unit: '台',total: 0,placeholder: '传感器状态',options: [],status: []}}},methods: {// 搜索 obj就是子组件传过来的对象search (obj) {console.log('子组件搜索返回数据：', obj)},// 刷新refresh () {console.log('刷新')},// 导出exportExcel () {console.log('导出')}}
}
</script>

css

<style scoped>
.search {width: 100%;height: 4rem;
}
.footer {text-align: center;
}
.el-table .el-table__cell {padding: 0.3rem 0;
}
</style>

结束！！！

vue elementui 搜索栏子组件封装相关推荐

vue cube-ui 搜索栏子组件封装
前言 vue2 整合 cube-ui 子组件(供有点点基础的看) 需求实现子组件(search_data_component.vue) html <template><div c ...
[vue] 如何在子组件中访问父组件的实例？
[vue] 如何在子组件中访问父组件的实例? this.$parent拿到父组件实例 this.$children拿到子组件实例(数组) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
vue element-ui之分页组件的封装
目录为什么要封装分页组件? 分页组件的封装如何使用? 为什么要封装分页组件? 分页组件用的最多的就是和表格一起,构成表格数据的翻页显示,当然也不仅限于表格,例如其它的流式加载.图片分批次加载等,都 ...
【Vue】解决el-dialog作为子组件封装点击显示与隐藏问题
element-ui中的el-dialog组件经常用作嵌套表单来使用,但是当我们把它封装成一个子组件时会发现点击隐藏与显示会出现问题.以下贴出关键代码,希望对大家有帮助,共同学习. 解决代码: el- ...
vue项目中element-ui的分页器(组件封装）
vue项目中element-ui的分页器组件 <template><el-col :span="24" class="toolbar" sty ...
vue循环渲染子组件视图不更新问题
最近在写一个功能,使用v-for循环渲染子组件:代码如下: 当datas的数据发生改变时,按理子组件展现的数据也应该重新渲染,不过在使用的时候并没有达到这样的效果,但是将循环渲染的子组件改成html标 ...
实例化vue对象绑定子组件_Vue-双向数据绑定
实例 Vue.js应用的创建很简单,通过构造函数 Vue 就可以创建一个 Vue 的根实例,并启动 Vue: var app = new Vue({//选项 }); 变量 app 就代表了这个 Vue ...
vue --- 模块从子组件获取数据
先看个一般的例子: // 我们需要将信息从子组件传递给父组件,(有可能不止一条信息,因此)肯定需要一个标识,这个标识放在$emit里面(js),在dom中通过@来关联父元素.如下:<div id ...
vue 父向子组件传递数据，子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

vue elementui 搜索栏子组件封装

前言

需求

实现