<template>
|
<div class="table-slot">
|
<template v-if="$slots.search">
|
<div class="search">
|
<slot name="search"></slot>
|
</div>
|
</template>
|
<div class="table">
|
<template v-if="$slots.setting">
|
<div style="margin-bottom: 20px;">
|
<slot name="setting"></slot>
|
</div>
|
</template>
|
<template v-if="$slots.table">
|
<Table :data="tableData" :total="total" :height="height" :queryForm="queryForm"
|
@handleCurrentChange="handleCurrentChange"
|
@handleSizeChange="handleSizeChange"
|
@selection-change="handleSelectionChange">
|
<slot name="table"></slot>
|
</Table>
|
</template>
|
<template v-if="$slots.tableCustom">
|
<slot name="tableCustom"></slot>
|
</template>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Table from '../Table/index.vue'
|
import Vue from 'vue'
|
export default {
|
components: {
|
Table,
|
},
|
props: {
|
height: {
|
type: Number,
|
default: () => Vue.prototype.$baseTableHeight()
|
},
|
tableData: {
|
type: Array,
|
default: () => []
|
},
|
total: {
|
type: Number,
|
default: 0
|
},
|
queryForm: {
|
type: Object,
|
default: () => {
|
return {
|
pageSize: 10,
|
pageNum: 1
|
}
|
}
|
}
|
},
|
methods: {
|
handleCurrentChange(page) {
|
this.$emit('handleCurrentChange', page)
|
},
|
handleSizeChange(size) {
|
this.$emit('handleSizeChange', size)
|
},
|
handleSelectionChange(selection) {
|
this.$emit('selection-change', selection)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.table-slot {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.search {
|
padding: 34px 30px 15px 30px;
|
box-shadow: 0px 10px 19px 0px rgba(0, 0, 0, 0.06);
|
border-radius: 16px;
|
border: 4px solid #FFFFFF;
|
background: rgba(255, 255, 255, 0.8);
|
margin-bottom: 30px;
|
}
|
|
.table {
|
flex: 1;
|
padding: 20px;
|
background: rgba(255, 255, 255, 0.8);
|
box-shadow: 0px 10px 19px 0px rgba(0, 0, 0, 0.06);
|
border-radius: 16px;
|
border: 4px solid #FFFFFF;
|
}
|
</style>
|
