releases 4.7.71

examples/views/table/TableTest5.vue

@@ -9,6 +9,7 @@
       :row-config="{isHover: true}"
       :loading="demo1.loading"
       :checkbox-config="{labelField: 'id', highlight: true, range: true}"
+      :menu-config="menuConfig"
       :data="demo1.tableData"
       :footer-data="demo1.footerData">
       <vxe-column type="seq" min-width="auto"></vxe-column>
@@ -28,6 +29,7 @@
 
 <script lang="ts" setup>
 import { onMounted, reactive } from 'vue'
+import { VxeTablePropTypes } from '../../../types'
 
 const demo1 = reactive({
   loading: false,
@@ -37,6 +39,46 @@ const demo1 = reactive({
   ]
 })
 
+const menuConfig = reactive<VxeTablePropTypes.MenuConfig>({
+  className: 'my-menus',
+  header: {
+    options: [
+      [
+        { code: 'exportAll', name: '导出所有.csv', suffixConfig: { content: 'xx' } }
+      ]
+    ]
+  },
+  body: {
+    options: [
+      [
+        { code: 'copy', name: '复制1（Ctrl+C）', suffixConfig: { content: 'xx' } },
+        { code: 'copy', name: '复制2（Ctrl+C）', suffixConfig: { icon: 'vxe-icon-delete-fill' } }
+      ],
+      [
+        { code: 'remove', name: '删除1', prefixConfig: { content: 'oo' } },
+        { code: 'remove', name: '删除2', prefixConfig: { icon: 'vxe-icon-close' } },
+        {
+          code: 'sort',
+          name: '排序',
+          children: [
+            { code: 'clearSort', name: '清除排序', suffixIcon: 'vxe-icon-close' },
+            { code: 'sortAsc', name: '升序', suffixIcon: 'vxe-icon-sort-alpha-asc color-orange' },
+            { code: 'sortDesc', name: '倒序', suffixIcon: 'vxe-icon-sort-alpha-desc color-orange' }
+          ]
+        },
+        { code: 'print', name: '打印（Ctrl+PC）', suffixIcon: 'vxe-icon-print' }
+      ]
+    ]
+  },
+  footer: {
+    options: [
+      [
+        { code: 'clearAll', name: '清空数据', suffixIcon: 'vxe-icon-close' }
+      ]
+    ]
+  }
+})
+
 onMounted(() => {
   demo1.loading = true
   setTimeout(() => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.7.70",
+  "version": "4.7.71",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -28,7 +28,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "vxe-pc-ui": "^4.1.6"
+    "vxe-pc-ui": "^4.1.7"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",

packages/table/module/menu/panel.ts

@@ -1,9 +1,12 @@
 import { defineComponent, h, Teleport, inject, ref, Ref, createCommentVNode } from 'vue'
+import { VxeUI } from '../../../ui'
 import { getFuncText } from '../../../ui/src/utils'
 import XEUtils from 'xe-utils'
 
 import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods } from '../../../../types'
 
+const { getIcon } = VxeUI
+
 export default defineComponent({
   name: 'VxeTableMenuPanel',
   setup (props, context) {
@@ -49,6 +52,8 @@ export default defineComponent({
               key: gIndex
             }, options.map((item, index) => {
               const hasChildMenus = item.children && item.children.some((child: any) => child.visible !== false)
+              const prefixOpts = Object.assign({}, item.prefixConfig)
+              const suffixOpts = Object.assign({}, item.suffixConfig)
               return item.visible === false
                 ? null
                 : h('li', {
@@ -70,22 +75,34 @@ export default defineComponent({
                       $xeTable.ctxMenuMouseoutEvent(evnt, item)
                     }
                   }, [
-                    h('i', {
-                      class: ['vxe-context-menu--link-prefix', item.prefixIcon]
-                    }),
-                    h('span', {
+                    h('div', {
+                      class: ['vxe-context-menu--link-prefix', prefixOpts.className || '']
+                    }, [
+                      h('i', {
+                        class: prefixOpts.icon || item.prefixIcon
+                      }),
+                      prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : createCommentVNode()
+                    ]),
+                    h('div', {
                       class: 'vxe-context-menu--link-content'
                     }, getFuncText(item.name)),
-                    h('i', {
-                      class: ['vxe-context-menu--link-suffix', hasChildMenus ? item.suffixIcon || 'suffix--haschild' : item.suffixIcon]
-                    })
+                    h('div', {
+                      class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
+                    }, [
+                      h('i', {
+                        class: (suffixOpts.icon || item.suffixIcon) || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : '')
+                      }),
+                      suffixOpts.content ? h('span', `${suffixOpts.content}`) : createCommentVNode()
+                    ])
                   ]),
                   hasChildMenus
                     ? h('ul', {
                       class: ['vxe-table--context-menu-clild-wrapper', {
                         'is--show': item === ctxMenuStore.selected && ctxMenuStore.showChild
                       }]
                     }, item.children.map((child: any, cIndex: any) => {
+                      const childPrefixOpts = Object.assign({}, child.prefixConfig)
+                      const childSuffixOpts = Object.assign({}, child.suffixConfig)
                       return child.visible === false
                         ? null
                         : h('li', {
@@ -107,12 +124,25 @@ export default defineComponent({
                               $xeTable.ctxMenuMouseoutEvent(evnt, item)
                             }
                           }, [
-                            h('i', {
-                              class: ['vxe-context-menu--link-prefix', child.prefixIcon]
-                            }),
-                            h('span', {
+                            h('div', {
+                              class: ['vxe-context-menu--link-prefix', childPrefixOpts.className || '']
+                            }, [
+                              h('i', {
+                                class: childPrefixOpts.icon || child.prefixIcon
+                              }),
+                              childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : createCommentVNode()
+                            ]),
+                            h('div', {
                               class: 'vxe-context-menu--link-content'
-                            }, getFuncText(child.name))
+                            }, getFuncText(child.name)),
+                            h('div', {
+                              class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
+                            }, [
+                              h('i', {
+                                class: childSuffixOpts.icon
+                              }),
+                              childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : createCommentVNode()
+                            ])
                           ])
                         ])
                     }))

packages/ui/index.ts

@@ -233,6 +233,7 @@ VxeUI.setIcon({
   TABLE_RADIO_CHECKED: iconPrefix + 'radio-checked-fill',
   TABLE_RADIO_UNCHECKED: iconPrefix + 'radio-unchecked',
   TABLE_CUSTOM_SORT: iconPrefix + 'drag-handle',
+  TABLE_MENU_OPTIONS: iconPrefix + 'arrow-right',
 
   // toolbar
   TOOLBAR_TOOLS_REFRESH: iconPrefix + 'repeat',

styles/components/table-module/menu.scss

@@ -19,46 +19,28 @@
   background-color: var(--vxe-ui-table-menu-background-color);
 }
 .vxe-context-menu--link {
-  display: block;
-  padding: 0 2.5em;
+  display: flex;
+  flex-direction: row;
   width: var(--vxe-ui-table-menu-item-width);
   line-height: 26px;
+  padding: 0 0.8em;
   color: var(--vxe-ui-font-color);
   cursor: pointer;
   .vxe-context-menu--link-prefix,
   .vxe-context-menu--link-suffix {
-    position: absolute;
-    top: 5px;
-    margin-right: 5px;
-    font-size: 16px;
-  }
-  .vxe-context-menu--link-prefix {
-    left: 5px;
-  }
-  .vxe-context-menu--link-suffix {
-    right: 5px;
-    &.suffix--haschild {
-      top: 8px;
-      &:before {
-        position: absolute;
-        content: "";
-        border: 4px solid transparent;
-        border-left-color: #727272;
-      }
-    }
+    min-width: 2em;
+    flex-shrink: 0;
+    text-align: center;
+    padding: 0 0.2em;
   }
   .vxe-context-menu--link-content {
-    display: block;
+    flex-grow: 1;
+    padding: 0 0.2em;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 }
-.vxe-table--context-menu-clild-wrapper {
-  .vxe-context-menu--link {
-    padding: 0 2em 0 2.5em;
-  }
-}
 .vxe-context-menu--option-wrapper,
 .vxe-table--context-menu-clild-wrapper {
   margin: 0;

styles/theme/base.scss

@@ -78,7 +78,7 @@
   --vxe-ui-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px var(--vxe-ui-table-fixed-scrolling-box-shadow-color);
   --vxe-ui-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px var(--vxe-ui-table-fixed-scrolling-box-shadow-color);
 
-  --vxe-ui-table-menu-item-width: 178px;
+  --vxe-ui-table-menu-item-width: 198px;
   --vxe-ui-table-menu-background-color: #fff;
 
   --vxe-ui-table-validate-error-color: #f56c6c;