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

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

@@ -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;
}