feat: 表格工具栏新增列设置功能

package.json

@@ -106,7 +106,9 @@
     "vite-plugin-purge-icons": "^0.9.2",
     "vite-plugin-style-import": "2.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vue-tsc": "^1.8.8"
+    "vue-tsc": "^1.8.8",
+    "vue-draggable-plus": "^0.2.6",
+    "lodash": "^4.17.21"
   },
   "engines": {
     "node": ">= 14.18.0"

src/components/Table/src/Table.vue

@@ -17,6 +17,9 @@ import { getSlot } from '@/utils/tsxHelper'
 import TableActions from './components/TableActions.vue'
 // import Sortable from 'sortablejs'
 // import { Icon } from '@/components/Icon'
+import { useAppStore } from '@/store/modules/app'
+
+const appStore = useAppStore()
 
 export default defineComponent({
   name: 'Table',
@@ -121,7 +124,9 @@ export default defineComponent({
       default: () => undefined
     },
     rowKey: propTypes.string.def('id'),
-    emptyText: propTypes.string.def('No Data'),
+    emptyText: propTypes.string.def('暂无数据'),
+    // 表格工具栏缓存唯一标识符
+    activeUID: propTypes.string.def(''),
     defaultExpandAll: propTypes.bool.def(false),
     expandRowKeys: {
       type: Array as PropType<string[]>,
@@ -345,7 +350,7 @@ export default defineComponent({
     const renderTreeTableColumn = (columnsChildren: TableColumn[]) => {
       const { align, headerAlign, showOverflowTooltip, preview } = unref(getProps)
       return columnsChildren.map((v) => {
-        if (v.hidden) return null
+        if (v.show === false) return null
         const props = { ...v } as any
         if (props.children) delete props.children
 
@@ -417,7 +422,7 @@ export default defineComponent({
       } = unref(getProps)
 
       return (columnsChildren || columns).map((v) => {
-        if (v.hidden) return null
+        if (v.show === false) return null
         if (v.type === 'index') {
           return (
             <ElTableColumn
@@ -429,6 +434,7 @@ export default defineComponent({
               headerAlign={v.headerAlign || headerAlign}
               label={v.label}
               width="65px"
+              fixed="left"
             ></ElTableColumn>
           )
         } else if (v.type === 'selection') {
@@ -494,6 +500,7 @@ export default defineComponent({
       if (getSlot(slots, 'append')) {
         tableSlots['append'] = (...args: any[]) => getSlot(slots, 'append', args)
       }
+      const toolbar = getSlot(slots, 'toolbar')
 
       // const { sortable } = unref(getProps)
 
@@ -511,14 +518,31 @@ export default defineComponent({
 
       return (
         <div v-loading={unref(getProps).loading}>
-          {unref(getProps).showAction ? (
-            <TableActions
-              columns={unref(getProps).columns}
-              onChangSize={changSize}
-              onRefresh={refresh}
-            />
-          ) : null}
-          <ElTable ref={elTableRef} data={unref(getProps).data} {...unref(getBindValue)}>
+          <div class="flex justify-between mb-1">
+            <div>{toolbar}</div>
+            <div class="pt-2">
+              {unref(getProps).showAction ? (
+                <TableActions
+                  activeUID={unref(getProps).activeUID}
+                  columns={unref(getProps).columns}
+                  el-table-ref={elTableRef}
+                  onChangSize={changSize}
+                  onRefresh={refresh}
+                />
+              ) : null}
+            </div>
+          </div>
+
+          <ElTable
+            ref={elTableRef}
+            data={unref(getProps).data}
+            {...unref(getBindValue)}
+            header-cell-style={
+              appStore.getIsDark
+                ? { color: '#CFD3DC', 'background-color': '#000' }
+                : { color: '#000', 'background-color': '#f5f7fa' }
+            }
+          >
             {{
               default: () => renderTableColumn(),
               ...tableSlots