From 4eceafe1e186eab76f0bf54b099c3a1b244aa70a Mon Sep 17 00:00:00 2001
From: xuliangzhan <xu_liangzhan@163.com>
Date: Fri, 6 Nov 2020 18:44:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=B7=B2=E7=9F=A5=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/App.vue                         | 29 ++++++++++++++++++++++++
 examples/api/form-item.js                | 13 +++++++++--
 examples/plugins/xtable/renderer/form.js |  8 +++----
 examples/views/table/renderer/Form.vue   |  7 +++---
 examples/views/table/start/Use.vue       |  9 ++++----
 package.json                             | 10 ++++----
 packages/form/src/form.js                | 23 +++++++++++++------
 packages/form/src/util.js                |  8 +++++++
 packages/v-x-e-table/src/interceptor.js  |  9 --------
 packages/v-x-e-table/src/renderer.js     | 22 +++++++++---------
 types/extends/renderer.d.ts              |  3 ++-
 11 files changed, 95 insertions(+), 46 deletions(-)

diff --git a/examples/App.vue b/examples/App.vue
index 5bf04f6fd..a9f823104 100644
--- 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':
diff --git a/examples/api/form-item.js b/examples/api/form-item.js
index 92d8278e5..be01fff32 100644
--- 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: []
       }
     ]
diff --git a/examples/plugins/xtable/renderer/form.js b/examples/plugins/xtable/renderer/form.js
index 081834de3..b408cfb0d 100644
--- 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>
diff --git a/examples/views/table/renderer/Form.vue b/examples/views/table/renderer/Form.vue
index 865f2fafa..ab2245653 100644
--- 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 [
diff --git a/examples/views/table/start/Use.vue b/examples/views/table/start/Use.vue
index 87cad2cd0..6661272a8 100644
--- 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 实例挂载内部对象，例如：
diff --git a/package.json b/package.json
index b8a0f043f..858d47157 100644
--- 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": {
diff --git a/packages/form/src/form.js b/packages/form/src/form.js
index 15d0218b4..3727fd4d2 100644
--- 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 })
             }
           }
         })
diff --git a/packages/form/src/util.js b/packages/form/src/util.js
index b4d621829..1eef9203d 100644
--- 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) {
diff --git a/packages/v-x-e-table/src/interceptor.js b/packages/v-x-e-table/src/interceptor.js
index 72c3d674f..81e455399 100644
--- 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) {
diff --git a/packages/v-x-e-table/src/renderer.js b/packages/v-x-e-table/src/renderer.js
index a22405674..b9fe0ce19 100644
--- 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
   }
 }
 
diff --git a/types/extends/renderer.d.ts b/types/extends/renderer.d.ts
index 3d4f2dc9a..522469c15 100644
--- 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;