埃驰前端
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

<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>