|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <el-table v-bind="computedProps.props" ref="tableRef" class="base-table">
|
|
|
+ <el-table v-bind="computedProps.props" ref="tableRef" class="base-table" @header-dragend="headerDragend">
|
|
|
<template v-for="(column, i) in computedProps.columns" :key="column.columnKey || column.index || column.prop || i">
|
|
|
<el-table-column v-if="column.type && ['index', 'selection'].includes(column.type)" v-bind="column" />
|
|
|
<el-table-column v-else-if="column.type === 'expand'" v-bind="column" #="scope">
|
|
@@ -28,9 +28,12 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="tsx" name="EpTable">
|
|
|
-import { shallowRef, computed, useSlots, useAttrs } from 'vue'
|
|
|
+import { shallowRef, computed, useSlots, useAttrs, onMounted } from 'vue'
|
|
|
import { ElTable, ElTableColumn, ElButton, ElIcon } from 'element-plus'
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
import { Refresh } from '@element-plus/icons-vue'
|
|
|
+import { localStorage } from '@/plugins/storage'
|
|
|
+import elementResizeDetectorMaker from 'element-resize-detector'
|
|
|
// import CommonEmpty from '@/components/common/Empty.vue'
|
|
|
import type { SetupContext, VNode, Slot } from 'vue'
|
|
|
import type { EpTableProps, EpTableColumn } from 'global-type'
|
|
@@ -40,7 +43,7 @@ interface BaseEpTableProps<T = any> extends EpTableProps<T> {
|
|
|
columns?: any
|
|
|
showOverflowTooltip?: any
|
|
|
}
|
|
|
-
|
|
|
+const route = useRoute()
|
|
|
const props = defineProps<BaseEpTableProps>()
|
|
|
|
|
|
const attrs = useAttrs()
|
|
@@ -48,6 +51,15 @@ const slots = useSlots()
|
|
|
|
|
|
const computedProps = computed(() => {
|
|
|
const { columns, ...tableProps } = props
|
|
|
+ if ((attrs as any)['memory-column']) {
|
|
|
+ columns.forEach((c: any) => {
|
|
|
+ if (c.prop) {
|
|
|
+ let w = getColumnMemoryWidthByProp(c.prop)
|
|
|
+ !!w && (c.width = w)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
return {
|
|
|
columns: columns,
|
|
|
props: tableProps,
|
|
@@ -96,6 +108,48 @@ function columnRender(column: EpTableColumn, index: number, inputSlots: SetupCon
|
|
|
</ElTableColumn>
|
|
|
)
|
|
|
}
|
|
|
+
|
|
|
+const getColumnMemoryWidthByProp = (prop: string) => {
|
|
|
+ let memoryColumnConfig = localStorage.get('memoryColumnConfig')
|
|
|
+ let customWidth = memoryColumnConfig?.[route.path]?.[prop]
|
|
|
+ return customWidth || null
|
|
|
+}
|
|
|
+
|
|
|
+const setColumnMemoryWidthByProp = (prop: string, width: any) => {
|
|
|
+ let memoryColumnConfig = localStorage.get('memoryColumnConfig')
|
|
|
+ if (!memoryColumnConfig) {
|
|
|
+ memoryColumnConfig = {}
|
|
|
+ }
|
|
|
+ if (!memoryColumnConfig[route.path]) {
|
|
|
+ memoryColumnConfig[route.path] = {}
|
|
|
+ }
|
|
|
+ memoryColumnConfig[route.path][prop] = width
|
|
|
+ localStorage.set('memoryColumnConfig', memoryColumnConfig)
|
|
|
+}
|
|
|
+
|
|
|
+const headerDragend = (newWidth: any, oldWidth: any, column: any, event: any) => {
|
|
|
+ if ((attrs as any)['memory-column']) {
|
|
|
+ setColumnMemoryWidthByProp(column.property, newWidth)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ if ((attrs as any)['memory-column']) {
|
|
|
+ let erd = elementResizeDetectorMaker()
|
|
|
+ erd.listenTo(tableRef.value?.$el as any, function (element: any) {
|
|
|
+ let headerCellDoms = element.querySelectorAll(
|
|
|
+ '.el-table__header-wrapper>.el-table__header>thead>tr:first-child>.el-table__cell'
|
|
|
+ )
|
|
|
+ for (let i = 0; i < headerCellDoms.length; i++) {
|
|
|
+ let item = headerCellDoms[i]
|
|
|
+ let prop = computedProps.value.columns?.[i]?.prop
|
|
|
+ if (prop) {
|
|
|
+ setColumnMemoryWidthByProp(prop, item.offsetWidth)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss"></style>
|