- 创建组件
<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>
2.注册全局组件
import RightToolBar from "./components/RightToolBar/index.vue";
Vue.component("RightToolBar", RightToolBar);
3.使用组件
<RightToolBar
:showSearch.sync="showSearch"
@queryTable="doSearch">
</RightToolBar>
showSearch:默认控制显示隐藏 true显示 false隐藏
doSearch: 本页面的搜索方法