修复已知问题

2026-01-21 05:27:57 +08:00 · 2020-11-06 18:44:34 +08:00
parent 556f0732a6
commit 4eceafe1e1
11 changed files with 95 additions and 46 deletions
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -88,6 +88,23 @@
      </div>
    </div>

+    <vxe-modal v-model="newVersionVisible" title="v4.x 预发布" width="500" min-height="200" min-width="400" :position="{left: 20, top: 20}" :mask="false" :lock-view="false" show-footer resize>
+      <template v-slot>
+        <ul>
+          <li>1. 全面支持 vue 3.0 Component API</li>
+          <li>2. 全面支持 ts，使用 Typescript 完全重写</li>
+          <li>3. 不再支持 IE，面向现代浏览器</li>
+          <li>4. 重写虚拟渲染，更快、更少的渲染次数</li>
+          <li>5. 重写渲染器：移除 h 参数</li>
+          <li>6. 高级用法：支持 Hooks 扩展</li>
+        </ul>
+      </template>
+      <template v-slot:footer>
+        <vxe-button @click="claseNewVersionEvent">不看</vxe-button>
+        <vxe-button status="primary" @click="viewNewVersionEvent">查看更多</vxe-button>
+      </template>
+    </vxe-modal>
+
    <vxe-modal v-model="supportVisible" :loading="supportLoading" title="💡技术支持" width="800" position="center">
      <template v-slot>
        <div class="support-declare">vxe-table 使用完全免费，如果该项目帮助了您，你可以通过捐赠或者加入技术支持群的方式来支持作者，同时您的支持也能帮助该项目持续维护下去！</div>
@@ -202,6 +219,7 @@ export default {
      stableVersionList: [],
      version: '3',
      usedJSHeapSize: '0',
+      newVersionVisible: false,
      tableList: [
        {
          label: 'app.aside.nav.start',
@@ -2332,6 +2350,9 @@ export default {
        }
      }, 3000)
    }
+    // setTimeout(() => {
+    //   this.newVersionVisible = localStorage.getItem('VXE_TABLE_NEW_VERSION') !== '4'
+    // }, 5000)
    this.init()
  },
  methods: {
@@ -2437,6 +2458,14 @@ export default {
    openEvent (tmplName) {
      open(`https://xuliangzhan_admin.gitee.io/vxe-template/${tmplName}/`)
    },
+    claseNewVersionEvent () {
+      this.newVersionVisible = false
+      localStorage.setItem('VXE_TABLE_NEW_VERSION', '4')
+    },
+    viewNewVersionEvent () {
+      this.claseNewVersionEvent()
+      location.href = '/vxe-table/v4/'
+    },
    vChangeEvent () {
      switch (this.version) {
        case '1':
--- a/examples/api/form-item.js
+++ b/examples/api/form-item.js
@@ -277,11 +277,20 @@ const apis = [
    list: [
      {
        name: 'default',
-        desc: '自定义表单项',
+        desc: '自定义内容模板',
        version: '',
        type: '',
        enum: '',
-        defVal: '{ data, property }',
+        defVal: '{ item, data, property }',
+        list: []
+      },
+      {
+        name: 'title',
+        desc: '自定义标题模板',
+        version: '2.9.27',
+        type: '',
+        enum: '',
+        defVal: '{ item, data, property }',
        list: []
      }
    ]
--- a/examples/plugins/xtable/renderer/form.js
+++ b/examples/plugins/xtable/renderer/form.js
@@ -2,8 +2,8 @@ import VXETable from '../../../../packages/v-x-e-table'

 // 创建一个简单的表单-输入框渲染
 VXETable.renderer.add('FormItemInput', {
-  // 项显示模板
-  renderItem (h, renderOpts, params) {
+  // 项内容模板
+  renderItemContent (h, renderOpts, params) {
    const { data, property } = params
    const { props } = renderOpts
    return [
@@ -14,8 +14,8 @@ VXETable.renderer.add('FormItemInput', {

 // 创建一个简单的表单-按钮组渲染
 VXETable.renderer.add('FormItemButtonGroup', {
-  // 项显示模板
-  renderItem () {
+  // 项内容模板
+  renderItemContent () {
    return [
      <vxe-button type="submit" status="primary">查询</vxe-button>,
      <vxe-button type="reset">重置</vxe-button>
--- a/examples/views/table/renderer/Form.vue
+++ b/examples/views/table/renderer/Form.vue
@@ -3,7 +3,8 @@
    <p class="tip">
      表单-项渲染 <grid-api-link prop="itemRender"/>，查看 <a class="link" href="https://gitee.com/xuliangzhan_admin/vxe-table/tree/v3/examples/plugins/xtable/renderer">示例的源码</a><span class="red">（具体请自行实现，该示例仅供参考）</span><br>
      配置参数：<br>
-      renderItem (h, renderOpts, <vxe-tooltip content="params: { data, property, $form }" enterable><i class="fa fa-question-circle"></i></vxe-tooltip>params) 项<br>
+      renderItemTitle (h, renderOpts, <vxe-tooltip content="params: { data, property, $form }" enterable><i class="fa fa-question-circle"></i></vxe-tooltip>params) 项标题<br>
+      renderItemContent (h, renderOpts, <vxe-tooltip content="params: { data, property, $form }" enterable><i class="fa fa-question-circle"></i></vxe-tooltip>params) 项内容<br>
      itemVisibleMethod (<vxe-tooltip content="params: { data, property }" enterable><i class="fa fa-question-circle"></i></vxe-tooltip>params) 项可视函数<br>
      itemResetMethod (<vxe-tooltip content="params: { data, property }" enterable><i class="fa fa-question-circle"></i></vxe-tooltip>params) 项重置函数<br>
    </p>
@@ -61,8 +62,8 @@ export default {
        `
        // 创建一个简单的表单-输入框渲染
        VXETable.renderer.add('FormItemInput', {
-          // 项显示模板
-          renderItem (h, renderOpts, params) {
+          // 项内容模板
+          renderItemContent (h, renderOpts, params) {
            const { data, property } = params
            const props = renderOpts.props || {}
            return [
--- a/examples/views/table/start/Use.vue
+++ b/examples/views/table/start/Use.vue
@@ -90,9 +90,8 @@
          i18n: (key, args) => i18n.t(key, args)
        })

-        // 先安装依赖模块
+        // 表格模块
        Vue.use(Icon)
-        Vue.use(Column)
        Vue.use(Header)
        Vue.use(Footer)
        Vue.use(Filter)
@@ -102,8 +101,10 @@
        Vue.use(Keyboard)
        Vue.use(Validator)

-        Vue.use(Tooltip)
+        // 可选组件
+        Vue.use(Column)
        Vue.use(Grid)
+        Vue.use(Tooltip)
        Vue.use(Toolbar)
        Vue.use(Pager)
        Vue.use(Form)
@@ -116,7 +117,7 @@
        Vue.use(Modal)
        Vue.use(List)

-        // 再安装核心库
+        // 安装表格
        Vue.use(Table)

        // 给 vue 实例挂载内部对象，例如：
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vxe-table",
-  "version": "3.0.0-beta.20",
+  "version": "3.0.0-beta.21",
  "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
  "scripts": {
    "serve": "vue-cli-service serve",
@@ -77,18 +77,18 @@
    "vue-router": "^3.2.0",
    "vue-template-compiler": "^2.6.12",
    "vuex": "^3.4.0",
-    "vxe-table-plugin-antd": "^1.9.3",
-    "vxe-table-plugin-element": "^1.9.4",
+    "vxe-table-plugin-antd": "^1.9.4",
+    "vxe-table-plugin-element": "^1.9.5",
    "vxe-table-plugin-export-pdf": "^1.8.8",
    "vxe-table-plugin-export-xlsx": "^2.0.5",
-    "vxe-table-plugin-iview": "^1.9.3",
+    "vxe-table-plugin-iview": "^1.9.4",
    "vxe-table-plugin-menus": "^1.4.10",
    "vxe-table-plugin-shortcut-key": "^1.3.0",
    "vxe-table-plugin-virtual-tree": "0.5.5",
    "xe-ajax": "^4.0.5",
    "xe-ajax-mock": "^1.12.0",
    "xe-clipboard": "^1.10.0",
-    "xe-utils": "^3.0.0-beta.20",
+    "xe-utils": "^3.0.0",
    "xlsx": "^0.16.5"
  },
  "peerDependencies": {
--- a/packages/form/src/form.js
+++ b/packages/form/src/form.js
@@ -53,7 +53,10 @@ function renderSuffixIcon (h, titleSuffix) {
 }

 function renderTitle (h, _vm, item) {
-  const { titlePrefix, titleSuffix } = item
+  const { data } = _vm
+  const { slots, field, itemRender, titlePrefix, titleSuffix } = item
+  const compConf = itemRender ? VXETable.renderer.get(itemRender.name) : null
+  const params = { data, property: field, item, $form: _vm }
  const tss = []
  if (titlePrefix) {
    tss.push(
@@ -73,7 +76,7 @@ function renderTitle (h, _vm, item) {
  tss.push(
    h('span', {
      class: 'vxe-form--item-title-label'
-    }, UtilTools.getFuncText(item.title))
+    }, compConf && compConf.renderItemTitle ? compConf.renderItemTitle(itemRender, params) : (slots && slots.title ? slots.title.call(_vm, params) : UtilTools.getFuncText(item.title)))
  )
  if (titleSuffix) {
    tss.push(
@@ -103,7 +106,7 @@ function renderItems (h, _vm) {
    const titleAlign = item.titleAlign || _vm.titleAlign
    const titleWidth = item.titleWidth || _vm.titleWidth
    let itemVisibleMethod = visibleMethod
-    const params = { data, property: field, $form: _vm }
+    const params = { data, property: field, item, $form: _vm }
    let isRequired
    if (visible === false) {
      return _e()
@@ -117,6 +120,14 @@ function renderItems (h, _vm) {
        isRequired = itemRules.some(rule => rule.required)
      }
    }
+    let contentVNs = []
+    if (compConf && compConf.renderItemContent) {
+      contentVNs = compConf.renderItemContent.call(_vm, h, itemRender, params)
+    } else if (compConf && compConf.renderItem) {
+      contentVNs = compConf.renderItem.call(_vm, h, itemRender, params)
+    } else if (slots && slots.default) {
+      contentVNs = slots.default.call(_vm, params, h)
+    }
    return h('div', {
      class: ['vxe-form--item', item.id, span ? `vxe-col--${span} is--span` : null, {
        'is--title': title,
@@ -138,9 +149,7 @@ function renderItems (h, _vm) {
        }, renderTitle(h, _vm, item)) : null,
        h('div', {
          class: ['vxe-form--item-content', align ? `align--${align}` : null]
-        }, (
-          compConf && compConf.renderItem ? compConf.renderItem.call(_vm, h, itemRender, params) : (slots && slots.default ? slots.default.call(_vm, params, h) : [])
-        ).concat(
+        }, contentVNs.concat(
          [
            collapseNode ? h('div', {
              class: 'vxe-form--item-trigger-node',
@@ -296,7 +305,7 @@ export default {
            XEUtils.set(data, field, resetValue === null ? getResetValue(XEUtils.get(data, field), undefined) : resetValue)
            const compConf = itemRender ? VXETable.renderer.get(itemRender.name) : null
            if (compConf && compConf.itemResetMethod) {
-              compConf.itemResetMethod({ data, property: field, $form: this })
+              compConf.itemResetMethod({ data, property: field, item, $form: this })
            }
          }
        })
--- a/packages/form/src/util.js
+++ b/packages/form/src/util.js
@@ -1,4 +1,6 @@
 import XEUtils from 'xe-utils/ctor'
+import VXETable from '../../v-x-e-table'
+import { UtilTools } from '../../tools'

 class ItemConfig {
  constructor ($xeform, _vm) {
@@ -23,6 +25,12 @@ class ItemConfig {
      errRule: null,
      slots: _vm.slots
    })
+    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      const compConf = _vm.itemRender ? VXETable.renderer.get(_vm.itemRender.name) : null
+      if (compConf && compConf.renderItem) {
+        UtilTools.warn('vxe.error.delProp', ['item-render.renderItem', 'item-render.renderItemContent'])
+      }
+    }
  }

  update (name, value) {
--- a/packages/v-x-e-table/src/interceptor.js
+++ b/packages/v-x-e-table/src/interceptor.js
@@ -1,5 +1,4 @@
 import XEUtils from 'xe-utils/ctor'
-import { UtilTools } from '../../tools'

 function toType (type) {
  return XEUtils.toString(type).replace('_', '').toLowerCase()
@@ -18,14 +17,6 @@ const interceptor = {
  },
  add (type, evntFn) {
    type = toType(type)
-
-    // v4 中不支持该事件
-    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
-      if ('created,mounted,activated,beforeDestroy,destroyed'.split(',').map(toType).indexOf(type) > -1) {
-        UtilTools.warn('vxe.error.notProp', [`interceptor.add(${type})`])
-      }
-    }
-
    if (evntFn && eventTypes.indexOf(type) > -1) {
      let eList = storeMap[type]
      if (!eList) {
--- a/packages/v-x-e-table/src/renderer.js
+++ b/packages/v-x-e-table/src/renderer.js
@@ -459,12 +459,12 @@ const renderMap = {
    renderDefault: nativeEditRender,
    renderFilter: nativeFilterRender,
    filterMethod: handleFilterMethod,
-    renderItem: nativeItemRender
+    renderItemContent: nativeItemRender
  },
  textarea: {
    autofocus: 'textarea',
    renderEdit: nativeEditRender,
-    renderItem: nativeItemRender
+    renderItemContent: nativeItemRender
  },
  select: {
    renderEdit: nativeSelectEditRender,
@@ -485,7 +485,7 @@ const renderMap = {
      })
    },
    filterMethod: handleFilterMethod,
-    renderItem (h, renderOpts, params) {
+    renderItemContent (h, renderOpts, params) {
      return [
        h('select', {
          class: 'vxe-default-select',
@@ -523,19 +523,19 @@ const renderMap = {
    renderDefault: defaultEditRender,
    renderFilter: defaultFilterRender,
    filterMethod: handleFilterMethod,
-    renderItem: defaultItemRender
+    renderItemContent: defaultItemRender
  },
  $textarea: {
    autofocus: '.vxe-textarea--inner',
-    renderItem: defaultItemRender
+    renderItemContent: defaultItemRender
  },
  $button: {
    renderDefault: defaultButtonEditRender,
-    renderItem: defaultButtonItemRender
+    renderItemContent: defaultButtonItemRender
  },
  $buttons: {
    renderDefault: defaultButtonsEditRender,
-    renderItem: defaultButtonsItemRender
+    renderItemContent: defaultButtonsItemRender
  },
  $select: {
    autofocus: '.vxe-input--inner',
@@ -559,7 +559,7 @@ const renderMap = {
      })
    },
    filterMethod: handleFilterMethod,
-    renderItem (h, renderOpts, params) {
+    renderItemContent (h, renderOpts, params) {
      const { data, property } = params
      const { options, optionProps, optionGroups, optionGroupProps } = renderOpts
      const itemValue = XEUtils.get(data, property)
@@ -575,17 +575,17 @@ const renderMap = {
  },
  $radio: {
    autofocus: '.vxe-radio--input',
-    renderItem: defaultFormItemRadioAndCheckboxRender
+    renderItemContent: defaultFormItemRadioAndCheckboxRender
  },
  $checkbox: {
    autofocus: '.vxe-checkbox--input',
-    renderItem: defaultFormItemRadioAndCheckboxRender
+    renderItemContent: defaultFormItemRadioAndCheckboxRender
  },
  $switch: {
    autofocus: '.vxe-switch--button',
    renderEdit: defaultEditRender,
    renderDefault: defaultEditRender,
-    renderItem: defaultItemRender
+    renderItemContent: defaultItemRender
  }
 }

--- a/types/extends/renderer.d.ts
+++ b/types/extends/renderer.d.ts
@@ -47,7 +47,8 @@ export interface RendererMapOptions {
  renderButton?(h: CreateElement, renderOpts: ToolbarButtonRenderOptions, params: ToolbarButtonRenderParams): VNode[] | string[];

  // 表单-项渲染
-  renderItem?(h: CreateElement, renderOpts: FormItemRenderOptions, params: FormItemRenderParams): VNode[] | string[];
+  renderItemTitle?(h: CreateElement, renderOpts: FormItemRenderOptions, params: FormItemRenderParams): VNode[] | string[];
+  renderItemContent?(h: CreateElement, renderOpts: FormItemRenderOptions, params: FormItemRenderParams): VNode[] | string[];
  itemVisibleMethod?(params: FormItemVisibleParams): boolean;
  itemResetMethod?(params: FormItemResetParams): void;