Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

动态table高度

Browse Source
This commit is contained in:
仲么了
2024-01-04 10:38:41 +08:00
parent 2bb7a82778
commit d4ee8e7821
5 changed files with 147 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/table/header/index.vue
View File

@@ -1,48 +1,54 @@
<template>
<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>
<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-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-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' />
<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;

102
src/components/table/index.vue
View File

@@ -1,36 +1,44 @@
<template>
<div :style="{ height: tableStore.table.height }">
<vxe-table
ref='tableRef'
:data='tableStore.table.data'
v-loading='tableStore.table.loading'
v-bind='Object.assign({}, defaultAttribute, $attrs)'
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'>
<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'
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'
align="center"
>
<Column
:attr='child'
:attr="child"
:key="key + '-column'"
v-for='(child, key) in item.children'
:tree-node='child.treeNode'
v-for="(child, key) in item.children"
:tree-node="child.treeNode"
>
<!-- tableStore 预设的列 render 方案 -->
<template v-if='child.render' #default='scope'>
<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] : '')"
: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>
@@ -38,41 +46,48 @@
</template>
<template v-else>
<Column
:attr='item'
:attr="item"
:key="key + '-column'"
v-for='(item, key) in tableStore.table.column'
:tree-node='item.treeNode'
v-for="(item, key) in tableStore.table.column"
:tree-node="item.treeNode"
>
<!-- tableStore 预设的列 render 方案 -->
<template v-if='item.render' #default='scope'>
<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] : '')" />
: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 v-if='props.pagination' class='table-pagination'>
</div>
<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;
}

11
src/utils/tableStore.ts
View File

@@ -2,7 +2,7 @@ import { reactive } from 'vue'
import createAxios from '@/utils/request'
import { requestPayload } from '@/utils/request'
import { Method } from 'axios'
import { mainHeight } from '@/utils/layout'
interface TableStoreParams {
url: string
pk?: string
@@ -10,6 +10,8 @@ interface TableStoreParams {
params?: anyObj
method?: Method
isWebPaging?: boolean // 是否前端分页
showPage?: boolean
publicHeight?: number
resetCallback?: () => void
loadCallback?: () => void
}
@@ -20,6 +22,7 @@ export default class TableStore {
public method: Method
public initData: any = null
public isWebPaging = false
public showPage = true
public table: CnTable = reactive({
ref: null,
selection: [],
@@ -33,7 +36,9 @@ export default class TableStore {
loading: true,
column: [],
loadCallback: null,
resetCallback: null
resetCallback: null,
height: mainHeight(20 + (this.showPage ? 58 : 0)).height as string,
publicHeight: 0
})
constructor(public options: TableStoreParams) {
@@ -42,6 +47,8 @@ export default class TableStore {
this.isWebPaging = options.isWebPaging || false
this.method = options.method || 'GET'
this.table.column = options.column
this.showPage = options.showPage || true
this.table.publicHeight = options.publicHeight || 0
this.table.resetCallback = options.resetCallback || null
this.table.loadCallback = options.loadCallback || null
Object.assign(this.table.params, options.params)

8
src/views/voltage/sags/operationsManagement/statistics.vue
View File

@@ -145,7 +145,7 @@ const tableStore = new TableStore({
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.35)',
formatter: function (params) {
formatter: function (params: any) {
var tips = ''
tips += params[0].name + '</br/>'
for (var i = 0; i < params.length; i++) {
@@ -165,7 +165,7 @@ const tableStore = new TableStore({
data: tableStore.table.data.area.areaInfo.map((item: any) => item.normalRate),
itemStyle: {
normal: {
color: function (params) {
color: function (params: any) {
if (params.value != 3.14159) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
@@ -193,7 +193,7 @@ const tableStore = new TableStore({
type: 'bar',
itemStyle: {
normal: {
color: function (params) {
color: function (params: any) {
if (params.value != 3.14159) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
@@ -219,7 +219,7 @@ const tableStore = new TableStore({
data: tableStore.table.data.area.areaInfo.map((item: any) => item.onlineRate),
itemStyle: {
normal: {
color: function (params) {
color: function (params: any) {
if (params.value >= 90) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{

2
types/table.d.ts vendored
View File

@@ -25,6 +25,8 @@ declare global {
}
loadCallback: (() => void) | null
resetCallback: (() => void) | null
height: string
publicHeight: number
}
/* 表格行 */