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

x-extends · Apr 23, 2024 · 3ed5b41 · 3ed5b41
1 parent f76e663
commit 3ed5b41
Show file tree

Hide file tree

Showing 11 changed files with 204 additions and 79 deletions.
diff --git 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 }) {

diff --git 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>
diff --git 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": "是否显示"

diff --git 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": "按钮组"
   },

diff --git 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": {

diff --git 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'

diff --git 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()