动态table高度
This commit is contained in:
仲么了
@@ -1,48 +1,54 @@
|
||||
<template>
|
||||
<!-- 通用搜索 -->
|
||||
<transition name='el-zoom-in-bottom' mode='out-in' v-if='$slots.select'>
|
||||
<div class='table-com-search' v-if='showSelect'>
|
||||
<el-form @submit.prevent='' @keyup.enter='onComSearch' label-position='left' :inline='true'>
|
||||
<slot name='select'></slot>
|
||||
<el-form-item label='日期' v-if='datePicker'>
|
||||
<DatePicker v-model='date' @change='dateChange'></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click='onComSearch' type='primary'>查询</el-button>
|
||||
<el-button @click='onResetForm'>重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</transition>
|
||||
<div ref="tableHeader">
|
||||
<!-- 通用搜索 -->
|
||||
<transition name="el-zoom-in-bottom" mode="out-in" v-if="$slots.select">
|
||||
<div class="table-com-search" v-if="showSelect">
|
||||
<el-form @submit.prevent="" @keyup.enter="onComSearch" label-position="left" :inline="true">
|
||||
<slot name="select"></slot>
|
||||
<el-form-item label="日期" v-if="datePicker">
|
||||
<DatePicker v-model="date" @change="dateChange"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onComSearch" type="primary">查询</el-button>
|
||||
<el-button @click="onResetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<div class='table-header ba-scroll-style' v-if='showOperation'>
|
||||
<slot name='operation'></slot>
|
||||
<!-- 右侧搜索框和工具按钮 -->
|
||||
<div class='table-search' >
|
||||
<slot name='right'></slot>
|
||||
<div class='table-search-button-group' v-if='$slots.select'>
|
||||
<el-button class='table-search-button-item' color='#dcdfe6' plain @click='showSelectChange'>
|
||||
<Icon size='14' name='el-icon-Search' />
|
||||
</el-button>
|
||||
<div class="table-header ba-scroll-style" v-if="showOperation">
|
||||
<slot name="operation"></slot>
|
||||
<!-- 右侧搜索框和工具按钮 -->
|
||||
<div class="table-search">
|
||||
<slot name="right"></slot>
|
||||
<div class="table-search-button-group" v-if="$slots.select">
|
||||
<el-button class="table-search-button-item" color="#dcdfe6" plain @click="showSelectChange">
|
||||
<Icon size="14" name="el-icon-Search" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { inject, ref } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { inject, ref, onMounted, nextTick, onUnmounted } from 'vue'
|
||||
import type TableStore from '@/utils/tableStore'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const date = ref([window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd'), window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd')])
|
||||
const tableHeader = ref()
|
||||
const date = ref([
|
||||
window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd'),
|
||||
window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd')
|
||||
])
|
||||
|
||||
interface Props {
|
||||
// 默认展开
|
||||
showSelect?: boolean
|
||||
showOperation?: boolean // 是否显示operation
|
||||
datePicker?: boolean
|
||||
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
@@ -54,9 +60,30 @@ if (props.datePicker) {
|
||||
tableStore.table.params.searchBeginTime = date.value[0]
|
||||
tableStore.table.params.searchEndTime = date.value[1]
|
||||
}
|
||||
// 动态计算table高度
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
for (const entry of entries) {
|
||||
handlerHeight()
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
resizeObserver.observe(tableHeader.value)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
resizeObserver.disconnect()
|
||||
})
|
||||
|
||||
const handlerHeight = () => {
|
||||
tableStore.table.height = mainHeight(
|
||||
tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
|
||||
).height as string
|
||||
}
|
||||
const showSelect = ref(props.showSelect)
|
||||
const showSelectChange = () => {
|
||||
showSelect.value = !showSelect.value
|
||||
nextTick(() => {
|
||||
handlerHeight()
|
||||
})
|
||||
}
|
||||
const onComSearch = () => {
|
||||
tableStore.onTableAction('search', {})
|
||||
@@ -70,7 +97,7 @@ const dateChange = () => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
<style scoped lang="scss">
|
||||
.table-header {
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
|
||||
@@ -1,78 +1,93 @@
|
||||
<template>
|
||||
<vxe-table
|
||||
ref='tableRef'
|
||||
:data='tableStore.table.data'
|
||||
v-loading='tableStore.table.loading'
|
||||
v-bind='Object.assign({}, defaultAttribute, $attrs)'
|
||||
>
|
||||
<!-- Column 组件内部是 el-table-column -->
|
||||
<template v-if='isGroup'>
|
||||
<vxe-table-colgroup
|
||||
v-if='isGroup'
|
||||
v-for='(item, index) in tableStore.table.column'
|
||||
:field='item.field'
|
||||
:title='item.title'
|
||||
:key='index'
|
||||
:min-width='item.width'
|
||||
show-overflow
|
||||
align='center'
|
||||
>
|
||||
<div :style="{ height: tableStore.table.height }">
|
||||
<vxe-table
|
||||
ref="tableRef"
|
||||
height="auto"
|
||||
:data="tableStore.table.data"
|
||||
v-loading="tableStore.table.loading"
|
||||
v-bind="Object.assign({}, defaultAttribute, $attrs)"
|
||||
>
|
||||
<!-- Column 组件内部是 el-table-column -->
|
||||
<template v-if="isGroup">
|
||||
<vxe-table-colgroup
|
||||
v-if="isGroup"
|
||||
v-for="(item, index) in tableStore.table.column"
|
||||
:field="item.field"
|
||||
:title="item.title"
|
||||
:key="index"
|
||||
:min-width="item.width"
|
||||
show-overflow
|
||||
align="center"
|
||||
>
|
||||
<Column
|
||||
:attr="child"
|
||||
:key="key + '-column'"
|
||||
v-for="(child, key) in item.children"
|
||||
:tree-node="child.treeNode"
|
||||
>
|
||||
<!-- tableStore 预设的列 render 方案 -->
|
||||
<template v-if="child.render" #default="scope">
|
||||
<FieldRender
|
||||
:field="child"
|
||||
:row="scope.row"
|
||||
:column="scope.column"
|
||||
:index="scope.rowIndex"
|
||||
:key="
|
||||
key +
|
||||
'-' +
|
||||
child.render +
|
||||
'-' +
|
||||
(child.field ? '-' + child.field + '-' + scope.row[child.field] : '')
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</Column>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Column
|
||||
:attr='child'
|
||||
:attr="item"
|
||||
:key="key + '-column'"
|
||||
v-for='(child, key) in item.children'
|
||||
:tree-node='child.treeNode'
|
||||
v-for="(item, key) in tableStore.table.column"
|
||||
:tree-node="item.treeNode"
|
||||
>
|
||||
<!-- tableStore 预设的列 render 方案 -->
|
||||
<template v-if='child.render' #default='scope'>
|
||||
<template v-if="item.render" #default="scope">
|
||||
<FieldRender
|
||||
:field='child'
|
||||
:row='scope.row'
|
||||
:column='scope.column'
|
||||
:index='scope.rowIndex'
|
||||
:key=" key + '-' + child.render + '-' + (child.field ? '-' + child.field + '-' + scope.row[child.field] : '')"
|
||||
:field="item"
|
||||
:row="scope.row"
|
||||
:column="scope.column"
|
||||
:index="scope.rowIndex"
|
||||
:key="
|
||||
key +
|
||||
'-' +
|
||||
item.render +
|
||||
'-' +
|
||||
(item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</Column>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Column
|
||||
:attr='item'
|
||||
:key="key + '-column'"
|
||||
v-for='(item, key) in tableStore.table.column'
|
||||
:tree-node='item.treeNode'
|
||||
>
|
||||
<!-- tableStore 预设的列 render 方案 -->
|
||||
<template v-if='item.render' #default='scope'>
|
||||
<FieldRender
|
||||
:field='item'
|
||||
:row='scope.row'
|
||||
:column='scope.column'
|
||||
:index='scope.rowIndex'
|
||||
:key=" key + '-' +item.render +'-' +(item.field ? '-' + item.field + '-' + scope.row[item.field] : '')" />
|
||||
</template>
|
||||
</Column>
|
||||
</template>
|
||||
</vxe-table>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
</vxe-table>
|
||||
<div v-if='props.pagination' class='table-pagination'>
|
||||
<div v-if="tableStore.showPage" class="table-pagination">
|
||||
<el-pagination
|
||||
:currentPage='tableStore.table.params!.pageNum'
|
||||
:page-size='tableStore.table.params!.pageSize'
|
||||
:page-sizes='pageSizes'
|
||||
:currentPage="tableStore.table.params!.pageNum"
|
||||
:page-size="tableStore.table.params!.pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
background
|
||||
:layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
|
||||
:total='tableStore.table.total'
|
||||
@size-change='onTableSizeChange'
|
||||
@current-change='onTableCurrentChange'
|
||||
:total="tableStore.table.total"
|
||||
@size-change="onTableSizeChange"
|
||||
@current-change="onTableCurrentChange"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<slot name='footer'></slot>
|
||||
<slot name="footer"></slot>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, inject, computed } from 'vue'
|
||||
import type { ElTable, TableInstance } from 'element-plus'
|
||||
import FieldRender from '@/components/table/fieldRender/index.vue'
|
||||
@@ -86,12 +101,10 @@ const tableRef = ref<TableInstance>()
|
||||
const tableStore = inject('tableStore') as TableStoreClass
|
||||
|
||||
interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
|
||||
pagination?: boolean
|
||||
isGroup?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
pagination: true,
|
||||
isGroup: false
|
||||
})
|
||||
console.log(props)
|
||||
@@ -113,7 +126,6 @@ const pageSizes = computed(() => {
|
||||
return defaultSizes
|
||||
})
|
||||
|
||||
|
||||
/*
|
||||
* 记录选择的项
|
||||
*/
|
||||
@@ -130,7 +142,7 @@ defineExpose({
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
<style scoped lang="scss">
|
||||
.ba-data-table :deep(.el-button + .el-button) {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user