1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
| <template>
| <div class="table-slot">
| <template v-if="$slots.setting">
| <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" :queryForm="queryForm" @currentChange="handleCurrentChange"
| @sizeChange="handleSizeChange">
| <slot name="table"></slot>
| </Table>
| </template>
| </div>
| </div>
| </template>
|
| <script>
| import Table from '../Table/index.vue'
| export default {
| components: {
| Table,
| },
| props: {
| 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)
| }
| }
| }
| </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>
|
|
