diff --git a/package.json b/package.json index 99ee210f6..e7aa5db5d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vxe-table", - "version": "3.8.10", + "version": "3.8.11", "description": "一个基于 vue 的 PC 端表单/表格组件,支持增删改查、虚拟树、列拖拽,懒加载、快捷菜单、数据校验、树形结构、打印导出、自定义模板、渲染器、JSON 配置式...", "scripts": { "update": "npm install --legacy-peer-deps", diff --git a/packages/form/src/form-config-item.js b/packages/form/src/form-config-item.js index a5ee45b3e..c1af15062 100644 --- a/packages/form/src/form-config-item.js +++ b/packages/form/src/form-config-item.js @@ -27,7 +27,7 @@ const VxeFormConfigItem = { }, render (h) { const { _e, $xeform, itemConfig: item } = this - const { rules, data, collapseAll, validOpts, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical } = $xeform + const { rules, data, disabled, readonly, collapseAll, validOpts, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical } = $xeform const { slots, title, folding, visible, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, vertical, children, showTitle, contentClassName, contentStyle, titleClassName, titleStyle } = item const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null const itemClassName = compConf ? (compConf.formItemClassName || compConf.itemClassName) : '' @@ -48,7 +48,7 @@ const VxeFormConfigItem = { const ovTitle = itemOverflow === 'title' const ovTooltip = itemOverflow === true || itemOverflow === 'tooltip' const hasEllipsis = ovTitle || ovTooltip || ovEllipsis - const params = { data, field, property: field, item, $form: $xeform, $grid: $xeform.xegrid } + const params = { data, disabled, readonly, field, property: field, item, $form: $xeform, $grid: $xeform.xegrid } let isRequired if (visible === false) { return _e() @@ -68,7 +68,7 @@ const VxeFormConfigItem = { class: ['vxe-form--gather vxe-form--item-row', item.id, span ? `vxe-form--item-col_${span} is--span` : '', className ? (XEUtils.isFunction(className) ? className(params) : className) : ''] }, childVNs) : _e() } - if (rules) { + if (!readonly && rules) { const itemRules = rules[field] if (itemRules) { isRequired = itemRules.some(rule => rule.required) diff --git a/packages/form/src/form-item.js b/packages/form/src/form-item.js index c432a430b..d02aba895 100644 --- a/packages/form/src/form-item.js +++ b/packages/form/src/form-item.js @@ -64,7 +64,7 @@ Object.keys(props).forEach(name => { }) const renderItem = (h, _vm, item, slots) => { - const { _e, rules, data, collapseAll, validOpts, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical } = _vm + const { _e, rules, data, disabled, readonly, collapseAll, validOpts, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical } = _vm const { title, folding, visible, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, vertical, showTitle, contentClassName, contentStyle, titleClassName, titleStyle } = item const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null const itemClassName = compConf ? (compConf.formItemClassName || compConf.itemClassName) : '' @@ -85,12 +85,12 @@ const renderItem = (h, _vm, item, slots) => { const ovTitle = itemOverflow === 'title' const ovTooltip = itemOverflow === true || itemOverflow === 'tooltip' const hasEllipsis = ovTitle || ovTooltip || ovEllipsis - const params = { data, field, property: field, item, $form: _vm, $grid: _vm.xegrid } + const params = { data, disabled, readonly, field, property: field, item, $form: _vm, $grid: _vm.xegrid } let isRequired if (visible === false) { return _e() } - if (rules) { + if (!readonly && rules) { const itemRules = rules[field] if (itemRules) { isRequired = itemRules.some(rule => rule.required) diff --git a/packages/form/src/form.js b/packages/form/src/form.js index f59ce7a82..b8b028001 100644 --- a/packages/form/src/form.js +++ b/packages/form/src/form.js @@ -84,6 +84,7 @@ export default { default: null }, className: [String, Function], + disabled: Boolean, readonly: Boolean, items: Array, rules: Object, @@ -251,9 +252,14 @@ export default { this.dispatchEvent('collapse', { status, collapse: status, data: this.data }, evnt) }, submitEvent (evnt) { + const { readonly } = this evnt.preventDefault() if (!this.preventSubmit) { this.clearValidate() + if (readonly) { + this.dispatchEvent('submit', { data: this.data }, evnt) + return + } this.beginValidate(this.getItems()).then((errMap) => { if (errMap) { this.dispatchEvent('submit-invalid', { data: this.data, errMap }, evnt) @@ -361,10 +367,18 @@ export default { return this.$nextTick() }, validate (callback) { + const { readonly } = this this.clearValidate() + if (readonly) { + return this.$nextTick() + } return this.beginValidate(this.getItems(), '', callback) }, validateField (fieldOrItem, callback) { + const { readonly } = this + if (readonly) { + return this.$nextTick() + } let fields = [] if (XEUtils.isArray(fieldOrItem)) { fields = fieldOrItem diff --git a/packages/form/src/render.js b/packages/form/src/render.js index 6df5753bd..06724b2ad 100644 --- a/packages/form/src/render.js +++ b/packages/form/src/render.js @@ -24,10 +24,10 @@ function renderSuffixIcon (h, titleSuffix) { } export function renderTitle (h, _vm, item) { - const { data, tooltipOpts } = _vm + const { data, readonly, disabled, tooltipOpts } = _vm const { slots, field, itemRender, titlePrefix, titleSuffix } = item const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null - const params = { data, field, property: field, item, $form: _vm, $grid: _vm.xegrid } + const params = { data, readonly, disabled, field, property: field, item, $form: _vm, $grid: _vm.xegrid } const contVNs = [] const titVNs = [] if (titlePrefix) { diff --git a/packages/table/src/methods.js b/packages/table/src/methods.js index fa13f3bd9..2c00da57f 100644 --- a/packages/table/src/methods.js +++ b/packages/table/src/methods.js @@ -2978,7 +2978,7 @@ const Methods = { tooltipStore.row = null tooltipStore.column = column tooltipStore.visible = true - // tooltipStore.currOpts = { content: null } + tooltipStore.currOpts = iconParams this.$nextTick(() => { const $tooltip = $refs.tooltip if ($tooltip) { @@ -3064,7 +3064,8 @@ const Methods = { Object.assign(tooltipStore, { row, column, - visible: true + visible: true, + currOpts: {} }) this.$nextTick(() => { const $tooltip = $refs.tooltip @@ -3095,7 +3096,8 @@ const Methods = { row: null, column: null, content: null, - visible: false + visible: false, + currOpts: {} }) if (tooltip) { tooltip.close() diff --git a/packages/table/src/table.js b/packages/table/src/table.js index 7d60ae801..b53a31234 100644 --- a/packages/table/src/table.js +++ b/packages/table/src/table.js @@ -432,7 +432,8 @@ export default { tooltipStore: { row: null, column: null, - visible: false + visible: false, + currOpts: {} }, // 存放数据校验相关信息 validStore: { @@ -1254,7 +1255,7 @@ export default { */ hasTip ? h('vxe-tooltip', { ref: 'tooltip', - props: this.tipConfig + props: Object.assign({}, this.tipConfig, this.tooltipStore.currOpts) }) : _e(), /** * 校验提示 diff --git a/styles/table.scss b/styles/table.scss index 76f68a283..feaf73d32 100644 --- a/styles/table.scss +++ b/styles/table.scss @@ -611,8 +611,7 @@ } } } - &.checkbox--range, - &.cell--selected { + &.checkbox--range { .vxe-body--column { user-select: none; }