vxe-table 使用完全免费，如果该项目帮助了您，你可以通过捐赠或者加入技术支持群的方式来支持作者，同时您的支持也能帮助该项目持续维护下去！
@@ -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 [
查询,
重置
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 @@
表单-项渲染 ，查看 示例的源码（具体请自行实现，该示例仅供参考）
配置参数：
- renderItem (h, renderOpts, params) 项
+ renderItemTitle (h, renderOpts, params) 项标题
+ renderItemContent (h, renderOpts, params) 项内容
itemVisibleMethod (params) 项可视函数
itemResetMethod (params) 项重置函数
@@ -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;