全局表格添加列配置功能

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
 }