创建组件
<template>
<div class="top-right-btn">
<el-row>
<el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
<el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
</el-tooltip>
<el-tooltip class="item" effect="dark" content="刷新" placement="top">
<el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
</el-tooltip>
</el-row>
</div>
</template>
<script>
export default {
name: "RightToolbar",
data() {
return {};
},
props: {
showSearch: {
type: Boolean,
default: true,
},
},
methods: {
//搜索
toggleSearch() {
this.$emit("update:showSearch", !this.showSearch);
},
//刷新
refresh() {
this.$emit("queryTable");
},
},
};
</script>
main.js导入全局注册
import RightToolbar from "@/components/RightToolbar"
Vue.component('RightToolbar', RightToolbar)
页面使用
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
showSearch:容器中控制显示隐藏
getList:刷新,查询方法