全局表格添加列配置功能

2026-07-09 13:54:18 +08:00
parent 1a69be62a0
commit 855c569535
116 changed files with 1078 additions and 9806 deletions
--- a/src/components/table/defaultAttribute.ts
+++ b/src/components/table/defaultAttribute.ts
@@ -9,11 +9,8 @@ export const defaultAttribute: VxeTableProps = {
    columnConfig: { resizable: true },
    rowConfig: { isCurrent: true, isHover: true },
    scrollX: { scrollToLeftOnChange: true },
-    scrollY: { scrollToTopOnChange: true, enabled: true },
-    treeConfig: {
-        reserve: true
-    },
-    showOverflow: true,
-     showFooter:true
+    scrollY: { scrollToTopOnChange: true, enabled: true, gt: 100 },
+    customConfig: { enabled: true, allowFixed: false, showFooter: false, immediate: true ,mode:'default'},
+    showOverflow: 'tooltip',
+    showHeaderOverflow: false
 }
-
--- a/src/components/table/header/index.vue
+++ b/src/components/table/header/index.vue
@@ -1,21 +1,39 @@
 <template>
    <div ref="tableHeader" class="cn-table-header">
        <div class="table-header ba-scroll-style">
-            <el-form style="flex: 1; height: 32px; display: flex; flex-wrap: wrap" ref="headerForm" @submit.prevent=""
-                @keyup.enter="onComSearch" label-position="left" :inline="true">
-                <el-form-item v-if="datePicker" style="grid-column: span 2; "
-                              :style="{ maxWidth: isStatisticData == 1 ? '750px' : '610px' }">
+            <el-form
+                style="flex: 1; height: 32px; display: flex; flex-wrap: wrap"
+                ref="headerForm"
+                @submit.prevent=""
+                @keyup.enter="onComSearch"
+                label-position="left"
+                :inline="true"
+            >
+                <el-form-item
+                    v-if="datePicker"
+                    style="grid-column: span 2"
+                    :style="{ maxWidth: isStatisticData == 1 ? '750px' : '610px' }"
+                >
                    <template #label>
                        <el-checkbox v-if="showTimeAll" v-model="timeAll" label="统计时间" />
                        <span v-else>{{ dateLabel }}</span>
                    </template>
-                    <DatePicker ref="datePickerRef" v-if="timeAll" :nextFlag="nextFlag" :theCurrentTime="theCurrentTime"
-                        :isStatisticData="isStatisticData"></DatePicker>
+                    <DatePicker
+                        ref="datePickerRef"
+                        v-if="timeAll"
+                        :nextFlag="nextFlag"
+                        :theCurrentTime="theCurrentTime"
+                        :isStatisticData="isStatisticData"
+                    ></DatePicker>
                </el-form-item>

                <el-form-item label="区域" v-if="area">
-                    <Area ref="areaRef" v-model="tableStore.table.params.deptIndex" @change-value="onAreaChange"
-                        style="width: 200px;" />
+                    <Area
+                        ref="areaRef"
+                        v-model="tableStore.table.params.deptIndex"
+                        @change-value="onAreaChange"
+                        style="width: 200px"
+                    />
                </el-form-item>
                <slot name="select"></slot>
            </el-form>
@@ -24,24 +42,44 @@
                    <Icon size="14" name="el-icon-ArrowUp" style="color: #fff" v-if="showSelect" />
                    <Icon size="14" name="el-icon-ArrowDown" style="color: #fff" v-else />
                </el-button>
-                <el-button @click="onComSearch" v-if="showSearch" :loading="tableStore.table.loading" type="primary"
-                    :icon="Search">
+                <el-button
+                    @click="onComSearch"
+                    v-if="showSearch"
+                    :loading="tableStore.table.loading"
+                    type="primary"
+                    :icon="Search"
+                >
                    查询
                </el-button>
-                <el-button @click="onResetForm" v-if="showSearch && showReset" :loading="tableStore.table.loading"
-                    :icon="RefreshLeft">
+                <el-button
+                    @click="onResetForm"
+                    v-if="showSearch && showReset"
+                    :loading="tableStore.table.loading"
+                    :icon="RefreshLeft"
+                >
                    重置
                </el-button>
-                <el-button @click="onExport" v-if="showExport" :loading="tableStore.table.exportLoading" type="primary"
-                    icon="el-icon-Download">
+                <el-button
+                    @click="onExport"
+                    v-if="showExport"
+                    :loading="tableStore.table.exportLoading"
+                    type="primary"
+                    icon="el-icon-Download"
+                >
                    导出
                </el-button>
            </template>
            <slot name="operation"></slot>
+            <el-button class="ml10" v-if="showCustomColumn" :icon="Setting" @click="openCustomColumn">列设置</el-button>
        </div>
-        <el-form :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
-            ref="headerFormSecond" @submit.prevent="" @keyup.enter="onComSearch" label-position="left"
-            :inline="true"></el-form>
+        <el-form
+            :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
+            ref="headerFormSecond"
+            @submit.prevent=""
+            @keyup.enter="onComSearch"
+            label-position="left"
+            :inline="true"
+        ></el-form>
    </div>
 </template>

@@ -52,8 +90,7 @@ import DatePicker from '@/components/form/datePicker/index.vue'
 import Area from '@/components/form/area/index.vue'
 import { mainHeight } from '@/utils/layout'
 import { useDictData } from '@/stores/dictData'
-import { Search, RefreshLeft } from '@element-plus/icons-vue'
-import { defineProps } from 'vue'
+import { Search, RefreshLeft, Setting } from '@element-plus/icons-vue'
 const emit = defineEmits(['selectChange', 'areaChange'])
 const tableStore = inject('tableStore') as TableStore
 const tableHeader = ref()
@@ -74,6 +111,7 @@ interface Props {
    showTimeAll?: boolean //控制时间是否显示
    dateLabel?: string //设置时间名称
    isStatisticData?: number | string // 0统计数据 1分钟数据
+    showCustomColumn?: boolean // 列设置
 }

 const props = withDefaults(defineProps<Props>(), {
@@ -86,7 +124,8 @@ const props = withDefaults(defineProps<Props>(), {
    showExport: false,
    showTimeAll: false,
    dateLabel: '统计日期',
-    isStatisticData: 0
+    isStatisticData: 0,
+    showCustomColumn: false
 })
 // 动态计算table高度
 const resizeObserver = new ResizeObserver(entries => {
@@ -128,7 +167,13 @@ watch(
        }, 500)
    }
 )
+const openCustomColumn = () => {
+    tableStore?.table?.ref?.openCustom?.()
+}
 onMounted(() => {
+    if (props.showCustomColumn && tableStore?.table) {
+        tableStore.table.customColumnInHeader = true
+    }
    timeAll.value = props.showTimeAll ? false : true
    if (props.datePicker && timeAll.value) {
        tableStore.table.params.searchBeginTime = datePickerRef.value.timeValue[0]
@@ -300,7 +345,7 @@ defineExpose({
    margin-left: 12px;
 }

-.mlr-12+.el-button {
+.mlr-12 + .el-button {
    margin-left: 12px;
 }

@@ -335,7 +380,7 @@ defineExpose({
        border-radius: 0;
    }

-    .el-button+.el-button {
+    .el-button + .el-button {
        margin: 0;
    }

@@ -346,7 +391,6 @@ defineExpose({

 html.dark {
    .table-search-button-group {
-
        button:focus,
        button:active {
            background-color: var(--el-color-info-dark-2);
--- a/src/components/table/index.vue
+++ b/src/components/table/index.vue
@@ -1,16 +1,18 @@
 <template>
    <div :style="{ height: typeof props.height === 'string' ? props.height : tableStore.table.height }">
+        <div v-if="showCustomColumn && !tableStore?.table?.customColumnInHeader" class="table-custom-toolbar">
+            <el-button icon="el-icon-Setting" @click="openCustomColumn">列设置</el-button>
+        </div>
        <vxe-table
            ref="tableRef"
            height="auto"
            :key="key"
            :data="tableStore.table.data"
            v-loading="tableStore.table.loading"
-            v-bind="Object.assign({}, defaultAttribute, $attrs)"
+           v-bind="tableBindProps"
            @checkbox-all="selectChangeEvent"
            @checkbox-change="selectChangeEvent"
-            :showOverflow="showOverflow"
-
+            @cell-click="onCellClick"
        >
          <!-- @sort-change="handleSortChange" -->
            <!-- Column 组件内部是 el-table-column -->
@@ -62,7 +64,7 @@
 </template>

 <script setup lang="ts">
-import { ref, nextTick, inject, computed, onMounted, watch } from 'vue'
+import { ref, nextTick, inject, computed, onMounted, watch, useAttrs } from 'vue'
 import type { ElTable } from 'element-plus'
 import { VxeTableEvents, VxeTableInstance } from 'vxe-table'
 import FieldRender from '@/components/table/fieldRender/index.vue'
@@ -78,17 +80,32 @@ const tableRef = ref<VxeTableInstance>()
 const tableStore = inject('tableStore') as TableStoreClass
 const router = useRouter()
 const key = ref(0)
+const emit = defineEmits<{
+    (e: 'cell-click', params: any): void
+}>()
 interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
    isGroup?: boolean
-    showOverflow?: boolean
+    showOverflow?: boolean | 'ellipsis' | 'title' | 'tooltip'
    height?: string | number
+    showCustomColumn?: boolean
 }

 const props = withDefaults(defineProps<Props>(), {
    isGroup: false,
-    showOverflow: true,
-    height: undefined
+    showOverflow: 'tooltip',
+    height: undefined,
+    showCustomColumn: false
 })
+const attrs = useAttrs()
+const tableBindProps = computed(() => {
+    return Object.assign({}, defaultAttribute, attrs, {
+        showOverflow: props.showOverflow,
+        showHeaderOverflow: false
+    })
+})
+const onCellClick: VxeTableEvents.CellClick<any> = params => {
+    emit('cell-click', params)
+}
 onMounted(() => {
    tableStore.table.ref = tableRef.value as VxeTableInstance
 })
@@ -118,7 +135,9 @@ const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
    const records = (tableRef.value as VxeTableInstance).getCheckboxRecords()
    tableStore.onTableAction('selection-change', records)
 }
-
+const openCustomColumn = () => {
+    tableRef.value?.openCustom?.()
+}
 const getRef = () => {
    return tableRef.value
 }