You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.6 KiB
107 lines
2.6 KiB
<template>
|
|
<div class="tableNavBtnsContent">
|
|
<div class="tableNavLeftBtns">
|
|
<!-- 左侧按钮 -->
|
|
<innerButton :Butttondata="buttonsLeft" @tableButtonClick="tableButtonClick"></innerButton>
|
|
</div>
|
|
<div class="tableNavRightBtns">
|
|
<!-- 快速搜索 -->
|
|
<searchNormal
|
|
ref="quicklySearchDomRef"
|
|
v-if="quicklySearchOption"
|
|
:searchNormalOption="quicklySearchOption"
|
|
@searchNormalClick="quicklySearchClick"
|
|
@searchNormalClear="quicklySearchClear"
|
|
></searchNormal>
|
|
<!-- 右侧按钮 -->
|
|
<innerButton :Butttondata="buttonsRight" @tableButtonClick="tableButtonClick"></innerButton>
|
|
</div>
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import innerButton from "./innerButton.vue"
|
|
import searchNormal from "@/components/searchNormal/index.vue"
|
|
import permission from "@/directive/permission/index"
|
|
export default {
|
|
directives: { permission },
|
|
components:{
|
|
innerButton,
|
|
searchNormal
|
|
},
|
|
props: {
|
|
Butttondata: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
quicklySearchOption: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
// 按钮整体靠右
|
|
buttonsAllIsRight:{
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
buttonsLeft:null,//左侧按钮数据
|
|
buttonsRight:null,//右侧按钮数据
|
|
}
|
|
},
|
|
mounted(){
|
|
this.initButtonsData()
|
|
},
|
|
methods:{
|
|
// 按钮数据处理（左右分开处理）
|
|
initButtonsData(){
|
|
this.buttonsLeft = []
|
|
this.buttonsRight = []
|
|
if(this.buttonsAllIsRight){
|
|
this.buttonsRight = this.Butttondata
|
|
return
|
|
}
|
|
this.Butttondata.forEach(item=>{
|
|
if(item.float && item.float == 'right'){
|
|
this.buttonsRight.push(item)
|
|
}else{
|
|
this.buttonsLeft.push(item)
|
|
}
|
|
})
|
|
},
|
|
// 按钮事件
|
|
tableButtonClick (val,item) {
|
|
this.$emit('tableButtonClick', val,item)
|
|
},
|
|
// 搜索
|
|
quicklySearchClick(val,option){
|
|
this.$emit('quicklySearchClick', val,option)
|
|
},
|
|
// 清除搜索
|
|
quicklySearchClear(val,option){
|
|
this.$emit('quicklySearchClear', val,option)
|
|
},
|
|
// 获取快速搜索的节点，便于其他组件清空搜索值
|
|
getQuicklySearchDom(){
|
|
return this.$refs.quicklySearchDomRef
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.tableNavBtnsContent{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.tableNavRightBtns{
|
|
display: flex;
|
|
margin-left: 10px;
|
|
.currenButton .el-button {
|
|
margin-left: 10px !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|