fix 修复自定义列、标题提示鼠标移上去相关报错问题 #2360 #2361

2025-12-07 22:28:34 +08:00 · 2024-04-23 13:16:18 +08:00
parent f76e663d81
commit 3ed5b412f4
11 changed files with 204 additions and 79 deletions
--- a/examples/views/grid/FullEdit.vue
+++ b/examples/views/grid/FullEdit.vue
@@ -53,6 +53,9 @@ export default defineComponent({
      id: 'full_edit_1',
      height: 600,
      rowId: 'id',
+      columnConfig: {
+        useKey: true
+      },
      customConfig: {
        storage: true,
        checkMethod ({ column }) {
--- a/examples/views/table/base/Basic.vue
+++ b/examples/views/table/base/Basic.vue
@@ -1,48 +1,134 @@
 <template>
  <div>
-    <p class="tip">
-      <table-api-link name="vxe-table"/> 基础表格，基于模板方式使用非常简单、便捷<br>
-      <span class="red">（注：每一列 field 字段属性不可更改）</span>
-    </p>
-
-    <vxe-toolbar>
-      <template #buttons>
-        <vxe-button @click="allAlign = 'left'">居左</vxe-button>
-        <vxe-button @click="allAlign = 'center'">居中</vxe-button>
-        <vxe-button @click="allAlign = 'right'">居右</vxe-button>
-      </template>
-    </vxe-toolbar>
-
-    <vxe-table
-      :align="allAlign"
-      :data="tableData1">
-      <vxe-column type="seq" width="60"></vxe-column>
-      <vxe-column field="name" title="Name"></vxe-column>
-      <vxe-column field="sex" title="Sex"></vxe-column>
-      <vxe-column field="age" title="Age"></vxe-column>
-    </vxe-table>
-
+    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
 </template>

-<script lang="ts">
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  setup () {
-    const allAlign = ref('')
-
-    const tableData1 = ref([
-      { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
-      { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
-      { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
-      { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
-    ])
-
+<script>
+export default {
+  data () {
    return {
-      allAlign,
-      tableData1
+      tableData: [],
+      gridOptions: {
+        border: true,
+        showFooter: true,
+        autoResize: false,
+        height: 400,
+        columns: [
+          { field: 'a', title: 'a', width: 47 },
+          { field: 'b', title: 'b', width: 55 },
+          { field: 'c', title: 'c', width: 105 },
+          { field: 'd', title: 'd', width: 200 },
+          { field: 'e', title: 'e', width: 200 },
+          { field: 'f', title: 'f', width: 200 },
+          { field: 'g', title: 'g', width: 410 }
+        ],
+        footerMethod ({ columns, data }) {
+          return [
+            columns.map((column, columnIndex) => {
+              if (columnIndex === 0) {
+                return '平均'
+              }
+              if (['age', 'rate'].includes(column.field)) {
+                return this.meanNum(data, column.field)
+              }
+              return ''
+            })
+          ]
+        },
+        data: [
+          {
+            id: 10001,
+            name: 'Test1',
+            nickname: 'T1',
+            role: 'Develop',
+            sex: 'Man',
+            age: 28,
+            rate: 6,
+            address: 'Shenzhen'
+          },
+          {
+            id: 10002,
+            name: 'Test2',
+            nickname: 'T2',
+            role: 'Test',
+            sex: 'Women',
+            age: 22,
+            rate: 5,
+            address: 'Guangzhou'
+          },
+          {
+            id: 10003,
+            name: 'Test3',
+            nickname: 'T3',
+            role: 'PM',
+            sex: 'Man',
+            age: 32,
+            rate: 4,
+            address: 'Shanghai'
+          },
+          {
+            id: 10004,
+            name: 'Test4',
+            nickname: 'T4',
+            role: 'Designer',
+            sex: 'Women',
+            age: 23,
+            rate: 1,
+            address: 'Shenzhen'
+          },
+          {
+            id: 10005,
+            name: 'Test5',
+            nickname: 'T5',
+            role: 'Develop',
+            sex: 'Women',
+            age: 30,
+            rate: 5,
+            address: 'Shanghai'
+          },
+          {
+            id: 10006,
+            name: 'Test6',
+            nickname: 'T6',
+            role: 'Designer',
+            sex: 'Women',
+            age: 21,
+            rate: 2,
+            address: 'Shenzhen'
+          },
+          {
+            id: 10007,
+            name: 'Test7',
+            nickname: 'T7',
+            role: 'Test',
+            sex: 'Man',
+            age: 29,
+            rate: 7,
+            address: 'Shenzhen'
+          },
+          {
+            id: 10008,
+            name: 'Test8',
+            nickname: 'T8',
+            role: 'Develop',
+            sex: 'Man',
+            age: 35,
+            rate: 5,
+            address: 'Shenzhen'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    meanNum (list, field) {
+      let count = 0
+      list.forEach((item) => {
+        count += Number(item[field])
+      })
+      return count / list.length
    }
  }
-})
+}
 </script>
--- a/helper/vetur/attributes.json
+++ b/helper/vetur/attributes.json
@@ -1025,7 +1025,7 @@
  },
  "vxe-radio-group/type": {
    "type": "string",
-    "description": "选项类型"
+    "description": "按钮类型"
  },
  "vxe-radio-group/size": {
    "type": "string",
@@ -1039,6 +1039,14 @@
    "type": "boolean",
    "description": "严格模式，选中后不能取消"
  },
+  "vxe-radio-group/options": {
+    "type": "{ value, label }[]",
+    "description": "选项列表"
+  },
+  "vxe-radio-group/option-props": {
+    "type": "any",
+    "description": "选项属性参数配置"
+  },
  "vxe-radio-button/model-value": {
    "type": "any",
    "description": "v-model 绑定值"
@@ -1111,6 +1119,14 @@
    "type": "boolean",
    "description": "是否禁用"
  },
+  "vxe-checkbox-group/options": {
+    "type": "{ value, label }[]",
+    "description": "选项列表"
+  },
+  "vxe-checkbox-group/option-props": {
+    "type": "any",
+    "description": "选项属性参数配置"
+  },
  "vxe-switch/model-value": {
    "type": "string | number | boolean",
    "description": "v-model 绑定值"
@@ -1423,6 +1439,10 @@
    "type": "string",
    "description": "模式"
  },
+  "vxe-button/title": {
+    "type": "string",
+    "description": "标题"
+  },
  "vxe-button/type": {
    "type": "string",
    "description": "类型"
@@ -1503,6 +1523,10 @@
    "type": "string | (({}) => string)",
    "description": "给展示容器附加 className"
  },
+  "vxe-button-group/options": {
+    "type": "array",
+    "description": "按钮列表"
+  },
  "vxe-tooltip/model-value": {
    "type": "boolean",
    "description": "是否显示"
--- a/helper/vetur/tags.json
+++ b/helper/vetur/tags.json
@@ -306,8 +306,11 @@
      "model-value",
      "type",
      "size",
+      "type",
      "disabled",
-      "strict"
+      "strict",
+      "options",
+      "option-props"
    ],
    "subtags": [
      "vxe-radio",
@@ -344,7 +347,9 @@
      "model-value",
      "max",
      "size",
-      "disabled"
+      "disabled",
+      "options",
+      "option-props"
    ],
    "subtags": [
      "vxe-checkbox"
@@ -463,6 +468,7 @@
    "attributes": [
      "content",
      "mode",
+      "title",
      "type",
      "size",
      "name",
@@ -487,7 +493,8 @@
      "round",
      "circle",
      "disabled",
-      "class-name"
+      "class-name",
+      "options"
    ],
    "description": "按钮组"
  },
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vxe-table",
-  "version": "4.6.0",
+  "version": "4.6.2",
  "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": {
-    "dom-zindex": "^1.0.1",
+    "dom-zindex": "^1.0.2",
    "xe-utils": "^3.5.25"
  },
  "devDependencies": {
--- a/packages/custom/src/panel.ts
+++ b/packages/custom/src/panel.ts
@@ -126,7 +126,7 @@ export default defineComponent({
      const { collectColumn } = internalData
      const customOpts = computeCustomOpts.value
      const { maxHeight } = customStore
-      const { checkMethod, trigger } = customOpts
+      const { checkMethod, visibleMethod, trigger } = customOpts
      const isMaxFixedColumn = computeIsMaxFixedColumn.value
      const colVNs: VNode[] = []
      const customWrapperOns: any = {}
@@ -136,15 +136,16 @@ export default defineComponent({
        customWrapperOns.onMouseleave = handleWrapperMouseleaveEvent
      }
      XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
-        const colTitle = formatText(column.getTitle(), 1)
-        const colKey = column.getKey()
-        const isColGroup = column.children && column.children.length
-        const isDisabled = checkMethod ? !checkMethod({ column }) : false
-        if (isColGroup || colKey) {
+        const isVisible = visibleMethod ? visibleMethod({ column }) : true
+        if (isVisible) {
          const isChecked = column.visible
          const isIndeterminate = column.halfVisible
+          const isColGroup = column.children && column.children.length
+          const colTitle = formatText(column.getTitle(), 1)
+          const isDisabled = checkMethod ? !checkMethod({ column }) : false
          colVNs.push(
            h('li', {
+              key: column.id,
              class: ['vxe-table-custom--option', `level--${column.level}`, {
                'is--group': isColGroup
              }]
@@ -255,20 +256,23 @@ export default defineComponent({
      const { customStore } = props
      const { collectColumn } = internalData
      const customOpts = computeCustomOpts.value
-      const { checkMethod } = customOpts
+      const { checkMethod, visibleMethod } = customOpts
      const isMaxFixedColumn = computeIsMaxFixedColumn.value
      const trVNs: VNode[] = []
      XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
-        const colTitle = formatText(column.getTitle(), 1)
-        const colKey = column.getKey()
-        const isColGroup = column.children && column.children.length
-        const isDisabled = checkMethod ? !checkMethod({ column }) : false
-        if (isColGroup || colKey) {
+        const isVisible = visibleMethod ? visibleMethod({ column }) : true
+        if (isVisible) {
          const isChecked = column.visible
          const isIndeterminate = column.halfVisible
+          const colTitle = formatText(column.getTitle(), 1)
+          const isColGroup = column.children && column.children.length
+          const isDisabled = checkMethod ? !checkMethod({ column }) : false
          trVNs.push(
            h('tr', {
-              class: [`vxe-table-custom-popup--row-level${column.level}`]
+              key: column.id,
+              class: [`vxe-table-custom-popup--row-level${column.level}`, {
+                'is--group': isColGroup
+              }]
            }, [
              h('td', {
                class: 'vxe-table-custom-popup--column-name'
--- a/packages/grid/src/grid.ts
+++ b/packages/grid/src/grid.ts
@@ -1088,7 +1088,10 @@ export default defineComponent({
            })
          }
        })
-        return $xetable.loadColumn(columns)
+        if ($xetable) {
+          return $xetable.loadColumn(columns)
+        }
+        return nextTick()
      }
      (gridMethods as any).reloadColumn = (columns: any[]): Promise<any> => {
        gridExtendTableMethods.clearAll()
--- a/packages/table/src/table.ts
+++ b/packages/table/src/table.ts
@@ -193,8 +193,7 @@ export default defineComponent({
        row: null,
        column: null,
        content: null,
-        visible: false,
-        currOpts: null
+        visible: false
      },
      // 存放数据校验相关信息
      validStore: {
@@ -406,11 +405,9 @@ export default defineComponent({
    })

    const computeTipConfig = computed(() => {
-      const { tooltipStore } = reactData
      const tooltipOpts = computeTooltipOpts.value
      return {
-        ...tooltipOpts,
-        ...tooltipStore.currOpts
+        ...tooltipOpts
      }
    })

@@ -4989,8 +4986,7 @@ export default defineComponent({
        Object.assign(tooltipStore, {
          row,
          column,
-          visible: true,
-          currOpts: null
+          visible: true
        })
        nextTick(() => {
          const $tooltip = refTooltip.value
@@ -5577,10 +5573,13 @@ export default defineComponent({
        const tipContent = iconParams.content || (iconParams as any).message
        if (tipContent) {
          const { tooltipStore } = reactData
+          const { column } = params
          const content = getFuncText(tipContent)
          handleTargetEnterEvent(true)
+          tooltipStore.row = null
+          tooltipStore.column = column
          tooltipStore.visible = true
-          tooltipStore.currOpts = { ...params, content: null }
+          // tooltipStore.currOpts = { content: null }
          nextTick(() => {
            const $tooltip = refTooltip.value
            if ($tooltip) {
--- a/packages/tooltip/src/tooltip.ts
+++ b/packages/tooltip/src/tooltip.ts
@@ -277,12 +277,6 @@ export default defineComponent({
      const { trigger } = props
      const { target } = reactData
      const wrapperElem = refElem.value
-      if (wrapperElem) {
-        const parentNode = wrapperElem.parentNode
-        if (parentNode) {
-          parentNode.removeChild(wrapperElem)
-        }
-      }
      if (target) {
        if (trigger === 'hover') {
          target.onmouseenter = null
@@ -291,6 +285,12 @@ export default defineComponent({
          target.onclick = null
        }
      }
+      if (wrapperElem) {
+        const parentNode = wrapperElem.parentNode
+        if (parentNode) {
+          parentNode.removeChild(wrapperElem)
+        }
+      }
    })

    const renderContent = () => {
--- a/packages/v-x-e-table/src/conf.ts
+++ b/packages/v-x-e-table/src/conf.ts
@@ -320,10 +320,6 @@ const GlobalConfig: VXETableConfigOptions = {
    // export: {
    //   types: ['csv', 'html', 'xml', 'txt']
    // },
-    custom: {
-      allowFixed: true,
-      showFooter: true
-    }
    // buttons: []
  },
  button: {
--- a/types/table.d.ts
+++ b/types/table.d.ts
@@ -963,8 +963,7 @@ export interface TableReactData<D = VxeTableDataRow> {
    row: D | null
    column: any
    content: any
-    visible: boolean,
-    currOpts: any
+    visible: boolean
  }
  // 存放数据校验相关信息
  validStore: {
@@ -1463,6 +1462,10 @@ export namespace VxeTablePropTypes {
     * 自定义列是否允许列选中的方法，该方法的返回值用来决定这一列的 checkbox 是否可以选中
     */
    checkMethod?(params: { column: VxeTableDefines.ColumnInfo }): boolean
+    /**
+     * 自定义列是否的方法，该方法的返回值用来决定这一列是否显示
+     */
+    visibleMethod?(params: { column: VxeTableDefines.ColumnInfo }): boolean
    allowFixed?: boolean
    showFooter?: boolean
    icon?: string