From 51e2b82495b062b443b4947c808ef379b4e66fae Mon Sep 17 00:00:00 2001 From: xuliangzhan Date: Sat, 4 Jun 2022 20:58:05 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=8F=AA=E8=AF=BB=E6=97=B6?= =?UTF-8?q?=E5=86=85=E5=AE=B9=E6=BA=A2=E5=87=BA=E6=97=A0=E6=B3=95=E8=87=AA?= =?UTF-8?q?=E5=8A=A8=E6=8D=A2=E8=A1=8C=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- README.zh-TW.md | 4 - examples/assets/style/layout.scss | 10 -- examples/views/select/Select.vue | 39 ++++++- package.json | 2 +- packages/edit/src/hook.ts | 9 +- packages/export/src/export-panel.ts | 38 +++---- packages/export/src/import-panel.ts | 18 ++-- packages/filter/src/hook.ts | 14 +-- packages/form/src/form-item.ts | 2 +- packages/form/src/render.ts | 2 +- packages/grid/src/grid.ts | 11 +- packages/locale/lang/en-US.ts | 2 + packages/locale/lang/ja-JP.ts | 2 + packages/locale/lang/zh-CN.ts | 2 + packages/locale/lang/zh-TC.ts | 2 + packages/menu/src/hooks.ts | 6 -- packages/select/src/select.ts | 162 +++++++++++++++++++++++++--- packages/table/src/body.ts | 2 +- packages/table/src/cell.ts | 6 +- packages/table/src/columnInfo.ts | 2 +- packages/table/src/table.ts | 116 +++++++++++--------- packages/table/src/util.ts | 8 +- public/index.html | 1 + public/issues.html | 1 + styles/select.scss | 29 ++++- styles/toolbar.scss | 14 ++- styles/variable.scss | 4 - types/form-item.d.ts | 17 ++- types/form.d.ts | 2 +- types/select.d.ts | 23 +++- types/table.d.ts | 14 +++ 32 files changed, 402 insertions(+), 164 deletions(-) diff --git a/README.md b/README.md index b7b6e9b0e..366032f4e 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ ## QQ 交流群 -![qq](https://gitee.com/xuliangzhan_admin/vxe-table/raw/master/public/static/donation/qq.png) +![qq](https://vxetable.cn/static/donation/qq.png) ## 浏览器支持 diff --git a/README.zh-TW.md b/README.zh-TW.md index a887e37f3..d9bd0c8ef 100644 --- a/README.zh-TW.md +++ b/README.zh-TW.md @@ -25,10 +25,6 @@ * [x] v3.0 基於 vue2.6+，支持現代瀏覽器並保留相容IE11，提升渲染效能 * [x] v4.0 基于 vue3.0+，只支持現代瀏覽器，不支持IE -## QQ 交流群 - -![qq](https://gitee.com/xuliangzhan_admin/vxe-table/raw/master/public/static/donation/qq.png) - ## 瀏覽器支持 ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) diff --git a/examples/assets/style/layout.scss b/examples/assets/style/layout.scss index 9b8ad85da..88b9f8eea 100644 --- a/examples/assets/style/layout.scss +++ b/examples/assets/style/layout.scss @@ -598,13 +598,3 @@ body, padding: 0 5px 0 20px; } } - -/*toolbar*/ -.vxe-toolbar { - .vxe-buttons--wrapper { - margin-bottom: 0.8em; - .vxe-input,.vxe-button,.vxe-button--dropdown{ - margin: 0em 0.8em 0em 0em; - } - } -} \ No newline at end of file diff --git a/examples/views/select/Select.vue b/examples/views/select/Select.vue index 16f136eda..7c20a307e 100644 --- a/examples/views/select/Select.vue +++ b/examples/views/select/Select.vue @@ -22,8 +22,11 @@ - - + + + + + @@ -201,6 +204,13 @@ export default defineComponent({ value21: null, value22: null, value23: null, + value24: null, + list24: [ + { value: 11, label: '111' }, + { value: 22, label: '131' }, + { value: 33, label: '561' }, + { value: 44, label: '467' } + ], value30: null, value31: null, value32: null, @@ -293,8 +303,33 @@ export default defineComponent({ { label: '6666', value: '6' } ] }) + + const remoteMethod24 = ({ searchValue }: any): Promise => { + return new Promise(resolve => { + const list = [ + { value: 1001, label: 'table' }, + { value: 1002, label: 'grid' }, + { value: 1003, label: 'button' }, + { value: 1004, label: 'toolbar' }, + { value: 1005, label: 'tooltip' }, + { value: 1006, label: 'pager' }, + { value: 1007, label: 'print' }, + { value: 1008, label: 'export' }, + { value: 1009, label: 'import' }, + { value: 1010, label: 'select' }, + { value: 1012, label: 'checkbox' }, + { value: 1013, label: 'group' } + ] + setTimeout(() => { + demo1.list24 = list.filter(item => item.label.indexOf(searchValue) > -1) + resolve() + }, 500) + }) + } + return { demo1, + remoteMethod24, demoCodes: [ `

diff --git a/package.json b/package.json index 2b2ef9ee7..be48c103a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vxe-table", - "version": "4.2.6-beta.1", + "version": "4.2.6-beta.4", "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...", "scripts": { "serve": "vue-cli-service serve", diff --git a/packages/edit/src/hook.ts b/packages/edit/src/hook.ts index c336fa604..0c341199c 100644 --- a/packages/edit/src/hook.ts +++ b/packages/edit/src/hook.ts @@ -251,7 +251,7 @@ const editHook: VxeGlobalHooksHandles.HookOptions = { const treeOpts = computeTreeOpts.value const { transform } = treeOpts const { actived, removeList, insertList } = editStore - const { checkField: property } = checkboxOpts + const { checkField } = checkboxOpts let rest: any[] = [] if (!rows) { rows = tableFullData @@ -265,7 +265,7 @@ const editHook: VxeGlobalHooksHandles.HookOptions = { } }) // 如果绑定了多选属性，则更新状态 - if (!property) { + if (!checkField) { rows.forEach((row: any) => { const sIndex = $xetable.findRowIndexOf(selection, row) if (sIndex > -1) { @@ -587,17 +587,18 @@ const editHook: VxeGlobalHooksHandles.HookOptions = { const { editConfig, mouseConfig } = props const { editStore, tableColumn } = reactData const editOpts = computeEditOpts.value - const { mode, activeMethod } = editOpts + const { mode } = editOpts const { actived } = editStore const { row, column } = params const { editRender } = column const cell = (params.cell || $xetable.getCell(row, column)) + const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod params.cell = cell if (isEnableConf(editConfig) && isEnableConf(editRender) && cell) { if (actived.row !== row || (mode === 'cell' ? actived.column !== column : false)) { // 判断是否禁用编辑 let type: 'edit-disabled' | 'edit-actived' = 'edit-disabled' - if (!activeMethod || activeMethod({ ...params, $table: $xetable })) { + if (!beforeEditMethod || beforeEditMethod({ ...params, $table: $xetable })) { if (mouseConfig) { editMethods.clearSelected() if ($xetable.clearCellAreas) { diff --git a/packages/export/src/export-panel.ts b/packages/export/src/export-panel.ts index 9ecd5fdc0..600d99f4e 100644 --- a/packages/export/src/export-panel.ts +++ b/packages/export/src/export-panel.ts @@ -2,11 +2,11 @@ import { defineComponent, h, createCommentVNode, ref, Ref, computed, reactive, i import XEUtils from 'xe-utils' import GlobalConfig from '../../v-x-e-table/src/conf' import { formatText } from '../../tools/utils' -import VxeModalConstructor from '../../modal/src/modal' -import VxeInputConstructor from '../../input/src/input' -import VxeCheckboxConstructor from '../../checkbox/src/checkbox' -import VxeSelectConstructor from '../../select/src/select' -import VxeButtonConstructor from '../../button/src/button' +import VxeModalComponent from '../../modal/src/modal' +import VxeInputComponent from '../../input/src/input' +import VxeCheckboxComponent from '../../checkbox/src/checkbox' +import VxeSelectComponent from '../../select/src/select' +import VxeButtonComponent from '../../button/src/button' import { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods } from '../../../types/all' @@ -194,7 +194,7 @@ export default defineComponent({ ]) ) }) - return h(VxeModalConstructor, { + return h(VxeModalComponent, { modelValue: storeData.visible, title: GlobalConfig.i18n(isPrint ? 'vxe.export.printTitle' : 'vxe.export.expTitle'), width: 660, @@ -223,7 +223,7 @@ export default defineComponent({ isPrint ? createCommentVNode() : h('tr', [ h('td', GlobalConfig.i18n('vxe.export.expName')), h('td', [ - h(VxeInputConstructor, { + h(VxeInputComponent, { ref: xInputFilename, modelValue: defaultOptions.filename, type: 'text', @@ -238,7 +238,7 @@ export default defineComponent({ isPrint ? createCommentVNode() : h('tr', [ h('td', GlobalConfig.i18n('vxe.export.expType')), h('td', [ - h(VxeSelectConstructor, { + h(VxeSelectComponent, { modelValue: defaultOptions.type, options: storeData.typeList.map((item: any) => { return { @@ -255,7 +255,7 @@ export default defineComponent({ isPrint || showSheet ? h('tr', [ h('td', GlobalConfig.i18n('vxe.export.expSheetName')), h('td', [ - h(VxeInputConstructor, { + h(VxeInputComponent, { ref: xInputSheetname, modelValue: defaultOptions.sheetName, type: 'text', @@ -270,7 +270,7 @@ export default defineComponent({ h('tr', [ h('td', GlobalConfig.i18n('vxe.export.expMode')), h('td', [ - h(VxeSelectConstructor, { + h(VxeSelectComponent, { modelValue: defaultOptions.mode, options: storeData.modeList.map((item: any) => { return { @@ -327,7 +327,7 @@ export default defineComponent({ h('div', { class: 'vxe-export--panel-option-row' }, [ - h(VxeCheckboxConstructor, { + h(VxeCheckboxComponent, { modelValue: defaultOptions.isHeader, title: GlobalConfig.i18n('vxe.export.expHeaderTitle'), content: GlobalConfig.i18n('vxe.export.expOptHeader'), @@ -335,7 +335,7 @@ export default defineComponent({ defaultOptions.isHeader = value } }), - h(VxeCheckboxConstructor, { + h(VxeCheckboxComponent, { modelValue: defaultOptions.isFooter, disabled: !storeData.hasFooter, title: GlobalConfig.i18n('vxe.export.expFooterTitle'), @@ -344,7 +344,7 @@ export default defineComponent({ defaultOptions.isFooter = value } }), - h(VxeCheckboxConstructor, { + h(VxeCheckboxComponent, { modelValue: defaultOptions.original, title: GlobalConfig.i18n('vxe.export.expOriginalTitle'), content: GlobalConfig.i18n('vxe.export.expOptOriginal'), @@ -356,7 +356,7 @@ export default defineComponent({ h('div', { class: 'vxe-export--panel-option-row' }, [ - h(VxeCheckboxConstructor, { + h(VxeCheckboxComponent, { modelValue: isHeader && hasColgroup && supportMerge ? defaultOptions.isColgroup : false, title: GlobalConfig.i18n('vxe.export.expColgroupTitle'), disabled: !isHeader || !hasColgroup || !supportMerge, @@ -365,7 +365,7 @@ export default defineComponent({ defaultOptions.isColgroup = value } }), - h(VxeCheckboxConstructor, { + h(VxeCheckboxComponent, { modelValue: hasMerge && supportMerge && checkedAll ? defaultOptions.isMerge : false, title: GlobalConfig.i18n('vxe.export.expMergeTitle'), disabled: !hasMerge || !supportMerge || !checkedAll, @@ -374,7 +374,7 @@ export default defineComponent({ defaultOptions.isMerge = value } }), - isPrint ? createCommentVNode() : h(VxeCheckboxConstructor, { + isPrint ? createCommentVNode() : h(VxeCheckboxComponent, { modelValue: supportStyle ? defaultOptions.useStyle : false, disabled: !supportStyle, title: GlobalConfig.i18n('vxe.export.expUseStyleTitle'), @@ -383,7 +383,7 @@ export default defineComponent({ defaultOptions.useStyle = value } }), - h(VxeCheckboxConstructor, { + h(VxeCheckboxComponent, { modelValue: hasTree ? defaultOptions.isAllExpand : false, disabled: !hasTree, title: GlobalConfig.i18n('vxe.export.expAllExpandTitle'), @@ -401,11 +401,11 @@ export default defineComponent({ h('div', { class: 'vxe-export--panel-btns' }, [ - h(VxeButtonConstructor, { + h(VxeButtonComponent, { content: GlobalConfig.i18n('vxe.export.expCancel'), onClick: cancelEvent }), - h(VxeButtonConstructor, { + h(VxeButtonComponent, { ref: xButtonConfirm, status: 'primary', content: GlobalConfig.i18n(isPrint ? 'vxe.export.expPrint' : 'vxe.export.expConfirm'), diff --git a/packages/export/src/import-panel.ts b/packages/export/src/import-panel.ts index 027a10a40..c387392f2 100644 --- a/packages/export/src/import-panel.ts +++ b/packages/export/src/import-panel.ts @@ -1,10 +1,10 @@ import { defineComponent, h, ref, Ref, computed, inject, reactive, nextTick } from 'vue' import XEUtils from 'xe-utils' import GlobalConfig from '../../v-x-e-table/src/conf' -import VxeModalConstructor from '../../modal/src/modal' -import VxeRadioGroupConstructor from '../../radio/src/group' -import VxeRadioConstructor from '../../radio/src/radio' -import VxeButtonConstructor from '../../button/src/button' +import VxeModalComponent from '../../modal/src/modal' +import VxeRadioGroupComponent from '../../radio/src/group' +import VxeRadioComponent from '../../radio/src/radio' +import VxeButtonComponent from '../../button/src/button' import { parseFile } from '../../tools/utils' import { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods } from '../../../types/all' @@ -93,7 +93,7 @@ export default defineComponent({ const selectName = computeSelectName.value const hasFile = computeHasFile.value const parseTypeLabel = computeParseTypeLabel.value - return h(VxeModalConstructor, { + return h(VxeModalComponent, { modelValue: storeData.visible, title: GlobalConfig.i18n('vxe.import.impTitle'), width: 440, @@ -144,13 +144,13 @@ export default defineComponent({ h('tr', [ h('td', GlobalConfig.i18n('vxe.import.impOpts')), h('td', [ - h(VxeRadioGroupConstructor, { + h(VxeRadioGroupComponent, { modelValue: defaultOptions.mode, 'onUpdate:modelValue' (value: any) { defaultOptions.mode = value } }, { - default: () => storeData.modeList.map((item: any) => h(VxeRadioConstructor, { label: item.value, content: GlobalConfig.i18n(item.label) })) + default: () => storeData.modeList.map((item: any) => h(VxeRadioComponent, { label: item.value, content: GlobalConfig.i18n(item.label) })) }) ]) ]) @@ -159,11 +159,11 @@ export default defineComponent({ h('div', { class: 'vxe-export--panel-btns' }, [ - h(VxeButtonConstructor, { + h(VxeButtonComponent, { content: GlobalConfig.i18n('vxe.import.impCancel'), onClick: cancelEvent }), - h(VxeButtonConstructor, { + h(VxeButtonComponent, { status: 'primary', disabled: !hasFile, content: GlobalConfig.i18n('vxe.import.impConfirm'), diff --git a/packages/filter/src/hook.ts b/packages/filter/src/hook.ts index 85d8790fd..9bb29474f 100644 --- a/packages/filter/src/hook.ts +++ b/packages/filter/src/hook.ts @@ -110,7 +110,7 @@ const tableFilterHook: VxeGlobalHooksHandles.HookOptions = { filterStore.maxHeight = maxHeight }) } - $xetable.dispatchEvent('filter-visible', { column, property: column.property, filterList: $xetable.getCheckedFilters(), visible: filterStore.visible }, evnt) + $xetable.dispatchEvent('filter-visible', { column, field: column.field, property: column.field, filterList: $xetable.getCheckedFilters(), visible: filterStore.visible }, evnt) }, handleClearFilter (column) { if (column) { @@ -140,7 +140,7 @@ const tableFilterHook: VxeGlobalHooksHandles.HookOptions = { const { filterStore, scrollXLoad: oldScrollXLoad, scrollYLoad: oldScrollYLoad } = reactData const filterOpts = computeFilterOpts.value const { column } = filterStore - const { property } = column + const { field } = column const values: any[] = [] const datas: any[] = [] column.filters.forEach((item: any) => { @@ -155,7 +155,7 @@ const tableFilterHook: VxeGlobalHooksHandles.HookOptions = { $xetable.handleTableData(true) $xetable.checkSelectionStatus() } - $xetable.dispatchEvent('filter-change', { column, property, values, datas, filters: filterList, filterList }, evnt) + $xetable.dispatchEvent('filter-change', { column, field, property: field, values, datas, filters: filterList, filterList }, evnt) $xetable.closeFilter() $xetable.updateFooter().then(() => { const { scrollXLoad, scrollYLoad } = reactData @@ -248,19 +248,19 @@ const tableFilterHook: VxeGlobalHooksHandles.HookOptions = { getCheckedFilters () { const { tableFullColumn } = internalData const filterList: any[] = [] - tableFullColumn.filter((column: any) => { - const { property, filters } = column + tableFullColumn.filter((column) => { + const { field, filters } = column const valueList: any[] = [] const dataList: any[] = [] if (filters && filters.length) { - filters.forEach((item: any) => { + filters.forEach((item) => { if (item.checked) { valueList.push(item.value) dataList.push(item.data) } }) if (valueList.length) { - filterList.push({ column, property, values: valueList, datas: dataList }) + filterList.push({ column, field, property: field, values: valueList, datas: dataList }) } } }) diff --git a/packages/form/src/form-item.ts b/packages/form/src/form-item.ts index 36cabc649..b5509d75b 100644 --- a/packages/form/src/form-item.ts +++ b/packages/form/src/form-item.ts @@ -81,7 +81,7 @@ export default defineComponent({ const showTooltip = itemOverflow === true || itemOverflow === 'tooltip' const hasEllipsis = showTitle || showTooltip || showEllipsis let itemVisibleMethod = visibleMethod - const params = { data, property: field, item, $form: $xeform } + const params = { data, field, property: field, item, $form: $xeform } let isRequired = false if (rules) { const itemRules = rules[field] diff --git a/packages/form/src/render.ts b/packages/form/src/render.ts index dfc33bcdd..ad2d2fdce 100644 --- a/packages/form/src/render.ts +++ b/packages/form/src/render.ts @@ -31,7 +31,7 @@ export function renderTitle ($xeform: VxeFormConstructor & VxeFormPrivateMethods const { slots, field, itemRender, titlePrefix, titleSuffix } = item const tooltipOpts = computeTooltipOpts.value const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null - const params = { data, property: field, item, $form: $xeform } + const params = { data, field, property: field, item, $form: $xeform } const titleSlot = slots ? slots.title : null const contVNs = [] const titVNs = [] diff --git a/packages/grid/src/grid.ts b/packages/grid/src/grid.ts index 9ade682b1..1a79dc21e 100644 --- a/packages/grid/src/grid.ts +++ b/packages/grid/src/grid.ts @@ -177,12 +177,15 @@ export default defineComponent({ return clss } - const handleActiveMethod = (params: any) => { + const handleBeforeEditMethod = (params: any) => { const { editConfig } = props const { pendingRecords } = reactData const $xetable = refTable.value - const activeMethod = editConfig ? editConfig.activeMethod : null - return $xetable.findRowIndexOf(pendingRecords, params.row) === -1 && (!activeMethod || activeMethod({ ...params, $grid: $xegrid })) + const beforeEditMethod = editConfig ? (editConfig.beforeEditMethod || editConfig.activeMethod) : null + if ($xetable.findRowIndexOf(pendingRecords, params.row) === -1) { + return !beforeEditMethod || beforeEditMethod({ ...params, $grid: $xegrid }) + } + return false } const computeTableProps = computed(() => { @@ -207,7 +210,7 @@ export default defineComponent({ } } if (editConfig) { - tableProps.editConfig = Object.assign({}, editConfig, { activeMethod: handleActiveMethod }) + tableProps.editConfig = Object.assign({}, editConfig, { beforeEditMethod: handleBeforeEditMethod }) } return tableProps }) diff --git a/packages/locale/lang/en-US.ts b/packages/locale/lang/en-US.ts index 5ba42d416..b7a9543f8 100644 --- a/packages/locale/lang/en-US.ts +++ b/packages/locale/lang/en-US.ts @@ -149,6 +149,8 @@ export default { operError: 'Error occurred, operation failed!' }, select: { + search: 'Search', + loadingText: 'Loading', emptyText: 'No Data' }, pager: { diff --git a/packages/locale/lang/ja-JP.ts b/packages/locale/lang/ja-JP.ts index 988524baa..309e84f34 100644 --- a/packages/locale/lang/ja-JP.ts +++ b/packages/locale/lang/ja-JP.ts @@ -149,6 +149,8 @@ export default { operError: 'エラーが発生しました。操作が失敗しました' }, select: { + search: 'Search', + loadingText: 'Loading', emptyText: 'データがありません' }, pager: { diff --git a/packages/locale/lang/zh-CN.ts b/packages/locale/lang/zh-CN.ts index bf04266ed..efe4bbc83 100644 --- a/packages/locale/lang/zh-CN.ts +++ b/packages/locale/lang/zh-CN.ts @@ -149,6 +149,8 @@ export default { operError: '发生错误，操作失败！' }, select: { + search: '搜索', + loadingText: '加载中', emptyText: '暂无数据' }, pager: { diff --git a/packages/locale/lang/zh-TC.ts b/packages/locale/lang/zh-TC.ts index 822c61159..ee763b62e 100644 --- a/packages/locale/lang/zh-TC.ts +++ b/packages/locale/lang/zh-TC.ts @@ -149,6 +149,8 @@ export default { operError: '發生錯誤，操作失敗！' }, select: { + search: '蒐索', + loadingText: '加載中', emptyText: '暫無資料' }, pager: { diff --git a/packages/menu/src/hooks.ts b/packages/menu/src/hooks.ts index e733d364d..5145bdf54 100644 --- a/packages/menu/src/hooks.ts +++ b/packages/menu/src/hooks.ts @@ -111,12 +111,6 @@ const tableMenuHook: VxeGlobalHooksHandles.HookOptions = { menuPrivateMethods = { /** * 处理菜单的移动 - * @param evnt - * @param ctxMenuStore - * @param property - * @param hasOper - * @param operRest - * @param menuList */ moveCtxMenu (evnt, ctxMenuStore, property, hasOper, operRest, menuList) { let selectItem diff --git a/packages/select/src/select.ts b/packages/select/src/select.ts index dc5250abc..84af503c1 100644 --- a/packages/select/src/select.ts +++ b/packages/select/src/select.ts @@ -1,12 +1,13 @@ -import { defineComponent, h, Teleport, PropType, ref, Ref, inject, VNode, resolveComponent, ComponentOptions, computed, provide, onUnmounted, reactive, nextTick, watch, onMounted } from 'vue' +import { defineComponent, h, Teleport, PropType, ref, Ref, inject, VNode, computed, provide, onUnmounted, reactive, nextTick, watch, onMounted, createCommentVNode } from 'vue' import XEUtils from 'xe-utils' import GlobalConfig from '../../v-x-e-table/src/conf' import { useSize } from '../../hooks/size' import { getEventTargetNode, getAbsolutePos } from '../../tools/dom' import { getLastZIndex, nextZIndex, getFuncText, formatText } from '../../tools/utils' import { GlobalEvent, hasEventKey, EVENT_KEYS } from '../../tools/event' +import VxeInputComponent from '../../input/src/input' -import { VxeSelectPropTypes, VxeSelectConstructor, SelectReactData, VxeSelectEmits, SelectMethods, SelectPrivateRef, VxeSelectMethods, VxeInputConstructor, VxeOptgroupProps, VxeOptionProps, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods } from '../../../types/all' +import { VxeSelectPropTypes, VxeSelectConstructor, SelectReactData, VxeSelectEmits, VxeInputConstructor, SelectMethods, SelectPrivateRef, VxeSelectMethods, VxeOptgroupProps, VxeOptionProps, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeInputDefines } from '../../../types/all' function isOptionVisible (option: any) { return option.visible !== false @@ -35,6 +36,10 @@ export default defineComponent({ optionConfig: Object as PropType, className: [String, Function] as PropType, size: { type: String as PropType, default: () => GlobalConfig.select.size || GlobalConfig.size }, + filterable: Boolean as PropType, + filterMethod: Function as PropType, + remote: Boolean as PropType, + remoteMethod: Function as PropType, emptyText: String as PropType, // 已废弃，被 option-config.keyField 替换 optionId: { type: String as PropType, default: () => GlobalConfig.select.optionId }, @@ -63,17 +68,22 @@ export default defineComponent({ fullOptionList: [], visibleGroupList: [], visibleOptionList: [], + remoteValueList: [], panelIndex: 0, panelStyle: {}, panelPlacement: null, + currentOption: null, currentValue: null, visiblePanel: false, animatVisible: false, - isActivated: false + isActivated: false, + searchValue: '', + searchLoading: false }) const refElem = ref() as Ref const refInput = ref() as Ref + const refInpSearch = ref() as Ref const refOptionWrapper = ref() as Ref const refOptionPanel = ref() as Ref @@ -163,6 +173,14 @@ export default defineComponent({ return fullOptionList.find((item) => optionValue === item[valueField]) } + const getRemoteSelectLabel = (value: any) => { + const { remoteValueList } = reactData + const labelField = computeLabelField.value + const remoteItem = remoteValueList.find(item => value === item.key) + const item = remoteItem ? remoteItem.result : null + return XEUtils.toValueString(item ? item[labelField] : value) + } + const getSelectLabel = (value: any) => { const labelField = computeLabelField.value const item = findOption(value) @@ -170,10 +188,14 @@ export default defineComponent({ } const computeSelectLabel = computed(() => { - const { modelValue, multiple } = props + const { modelValue, multiple, remote } = props const multiMaxCharNum = computeMultiMaxCharNum.value if (modelValue && multiple) { - return (XEUtils.isArray(modelValue) ? modelValue : [modelValue]).map((val) => { + const vals = XEUtils.isArray(modelValue) ? modelValue : [modelValue] + if (remote) { + return vals.map(val => getRemoteSelectLabel(val)).join(', ') + } + return vals.map((val) => { const label = getSelectLabel(val) if (multiMaxCharNum > 0 && label.length > multiMaxCharNum) { return `${label.substring(0, multiMaxCharNum)}...` @@ -181,6 +203,9 @@ export default defineComponent({ return label }).join(', ') } + if (remote) { + return getRemoteSelectLabel(modelValue) + } return getSelectLabel(modelValue) }) @@ -198,12 +223,27 @@ export default defineComponent({ * 刷新选项，当选项被动态显示/隐藏时可能会用到 */ const refreshOption = () => { - const { fullOptionList, fullGroupList } = reactData + const { filterable, filterMethod } = props + const { fullOptionList, fullGroupList, searchValue } = reactData const isGroup = computeIsGroup.value + const groupLabelField = computeGroupLabelField.value + const labelField = computeLabelField.value if (isGroup) { - reactData.visibleGroupList = fullGroupList.filter(isOptionVisible) + if (filterable && filterMethod) { + reactData.visibleGroupList = fullGroupList.filter(group => isOptionVisible(group) && filterMethod({ group, option: null, searchValue })) + } else if (filterable) { + reactData.visibleGroupList = fullGroupList.filter(group => isOptionVisible(group) && (!searchValue || `${group[groupLabelField]}`.indexOf(searchValue) > -1)) + } else { + reactData.visibleGroupList = fullGroupList.filter(isOptionVisible) + } } else { - reactData.visibleOptionList = fullOptionList.filter(isOptionVisible) + if (filterable && filterMethod) { + reactData.visibleOptionList = fullOptionList.filter(option => isOptionVisible(option) && filterMethod({ group: null, option, searchValue })) + } else if (filterable) { + reactData.visibleOptionList = fullOptionList.filter(option => isOptionVisible(option) && (!searchValue || `${option[labelField]}`.indexOf(searchValue) > -1)) + } else { + reactData.visibleOptionList = fullOptionList.filter(isOptionVisible) + } } return nextTick() } @@ -233,6 +273,7 @@ export default defineComponent({ const setCurrentOption = (option: any) => { const valueField = computeValueField.value if (option) { + reactData.currentOption = option reactData.currentValue = option[valueField] } } @@ -339,7 +380,7 @@ export default defineComponent({ let hidePanelTimeout: number const showOptionPanel = () => { - const { loading, disabled } = props + const { loading, disabled, filterable } = props if (!loading && !disabled) { clearTimeout(hidePanelTimeout) if (!reactData.inited) { @@ -347,6 +388,9 @@ export default defineComponent({ } reactData.isActivated = true reactData.animatVisible = true + if (filterable) { + refreshOption() + } setTimeout(() => { const { modelValue, multiple } = props const currOption = findOption(multiple && modelValue ? modelValue[0] : modelValue) @@ -355,6 +399,7 @@ export default defineComponent({ setCurrentOption(currOption) scrollToOption(currOption) } + handleFocusSearch() }, 10) updateZindex() updatePlacement() @@ -362,6 +407,8 @@ export default defineComponent({ } const hideOptionPanel = () => { + reactData.searchValue = '' + reactData.searchLoading = false reactData.visiblePanel = false hidePanelTimeout = window.setTimeout(() => { reactData.animatVisible = false @@ -380,6 +427,7 @@ export default defineComponent({ } const clearValueEvent = (evnt: Event, selectValue: any) => { + reactData.remoteValueList = [] changeEvent(evnt, selectValue) selectMethods.dispatchEvent('clear', { value: selectValue }, evnt) } @@ -389,8 +437,9 @@ export default defineComponent({ hideOptionPanel() } - const changeOptionEvent = (evnt: Event, selectValue: any) => { + const changeOptionEvent = (evnt: Event, selectValue: any, option: any) => { const { modelValue, multiple } = props + const { remoteValueList } = reactData if (multiple) { let multipleValue if (modelValue) { @@ -402,8 +451,15 @@ export default defineComponent({ } else { multipleValue = [selectValue] } + const remoteItem = remoteValueList.find(item => item.key === selectValue) + if (remoteItem) { + remoteItem.result = option + } else { + remoteValueList.push({ key: selectValue, result: option }) + } changeEvent(evnt, multipleValue) } else { + reactData.remoteValueList = [{ key: selectValue, result: option }] changeEvent(evnt, selectValue) hideOptionPanel() } @@ -512,7 +568,7 @@ export default defineComponent({ const handleGlobalKeydownEvent = (evnt: KeyboardEvent) => { const { clearable, disabled } = props - const { visiblePanel, currentValue } = reactData + const { visiblePanel, currentValue, currentOption } = reactData if (!disabled) { const isTab = hasEventKey(evnt, EVENT_KEYS.TAB) const isEnter = hasEventKey(evnt, EVENT_KEYS.ENTER) @@ -530,7 +586,7 @@ export default defineComponent({ } else if (isEnter) { evnt.preventDefault() evnt.stopPropagation() - changeOptionEvent(evnt, currentValue) + changeOptionEvent(evnt, currentValue, currentOption) } else if (isUpArrow || isDwArrow) { evnt.preventDefault() let { firstOption, offsetOption } = findOffsetOption(currentValue, isUpArrow) @@ -558,6 +614,17 @@ export default defineComponent({ hideOptionPanel() } + const handleFocusSearch = () => { + if (props.filterable) { + nextTick(() => { + const inpSearch = refInpSearch.value + if (inpSearch) { + inpSearch.focus() + } + }) + } + } + const focusEvent = () => { if (!props.disabled) { reactData.isActivated = true @@ -568,6 +635,37 @@ export default defineComponent({ reactData.isActivated = false } + const modelSearchEvent = (value: string) => { + reactData.searchValue = value + } + + const focusSearchEvent = () => { + reactData.isActivated = true + } + + const keydownSearchEvent = (params: VxeInputDefines.KeydownEventParams) => { + const { $event } = params + const isEnter = hasEventKey($event, EVENT_KEYS.ENTER) + if (isEnter) { + $event.preventDefault() + $event.stopPropagation() + } + } + + const triggerSearchEvent = XEUtils.debounce(function () { + const { remote, remoteMethod } = props + const { searchValue } = reactData + if (remote && remoteMethod) { + reactData.searchLoading = true + Promise.resolve(remoteMethod({ searchValue })).then(() => nextTick()).catch(() => nextTick()).finally(() => { + reactData.searchLoading = false + refreshOption() + }) + } else { + refreshOption() + } + }, 350, { trailing: true }) + const togglePanelEvent = (params: any) => { const { $event } = params $event.preventDefault() @@ -611,7 +709,7 @@ export default defineComponent({ }, onClick: (evnt: MouseEvent) => { if (!isDisabled) { - changeOptionEvent(evnt, optionValue) + changeOptionEvent(evnt, optionValue, option) } }, onMouseenter: () => { @@ -654,8 +752,22 @@ export default defineComponent({ } const renderOpts = () => { - const { visibleGroupList, visibleOptionList } = reactData + const { visibleGroupList, visibleOptionList, searchLoading } = reactData const isGroup = computeIsGroup.value + if (searchLoading) { + return [ + h('div', { + class: 'vxe-select--search-loading' + }, [ + h('i', { + class: ['vxe-select--search-icon', GlobalConfig.icon.SELECT_LOADED] + }), + h('span', { + class: 'vxe-select--search-text' + }, GlobalConfig.i18n('vxe.select.loadingText')) + ]) + ] + } if (isGroup) { if (visibleGroupList.length) { return renderOptgroup() @@ -763,7 +875,7 @@ export default defineComponent({ }) const renderVN = () => { - const { className, transfer, disabled, loading } = props + const { className, transfer, disabled, loading, filterable } = props const { inited, isActivated, visiblePanel } = reactData const vSize = computeSize.value const selectLabel = computeSelectLabel.value @@ -774,6 +886,7 @@ export default defineComponent({ [`size--${vSize}`]: vSize, 'is--visivle': visiblePanel, 'is--disabled': disabled, + 'is--filter': filterable, 'is--loading': loading, 'is--active': isActivated }] @@ -782,7 +895,7 @@ export default defineComponent({ class: 'vxe-select-slots', ref: 'hideOption' }, slots.default ? slots.default({}) : []), - h(resolveComponent('vxe-input') as ComponentOptions, { + h(VxeInputComponent, { ref: refInput, clearable: props.clearable, placeholder: props.placeholder, @@ -815,6 +928,23 @@ export default defineComponent({ placement: reactData.panelPlacement, style: reactData.panelStyle }, inited ? [ + filterable ? h('div', { + class: 'vxe-select-filter--wrapper' + }, [ + h(VxeInputComponent, { + ref: refInpSearch, + class: 'vxe-select-filter--input', + modelValue: reactData.searchValue, + clearable: true, + placeholder: GlobalConfig.i18n('vxe.select.search'), + prefixIcon: GlobalConfig.icon.INPUT_SEARCH, + 'onUpdate:modelValue': modelSearchEvent, + onFocus: focusSearchEvent, + onKeydown: keydownSearchEvent, + onChange: triggerSearchEvent, + onSearch: triggerSearchEvent + }) + ]) : createCommentVNode(), h('div', { ref: refOptionWrapper, class: 'vxe-select-option--wrapper' diff --git a/packages/table/src/body.ts b/packages/table/src/body.ts index cfc1c8627..e2852f441 100644 --- a/packages/table/src/body.ts +++ b/packages/table/src/body.ts @@ -234,7 +234,7 @@ export default defineComponent({ } // 如果编辑列开启显示状态 if (!fixedHiddenColumn && editConfig && (editRender || cellRender) && (editOpts.showStatus || editOpts.showUpdateStatus)) { - isDirty = $xetable.isUpdateByRow(row, column.property) + isDirty = $xetable.isUpdateByRow(row, column.field) } const tdVNs = [] if (fixedHiddenColumn && (allColumnOverflow ? isAllOverflow : allColumnOverflow)) { diff --git a/packages/table/src/cell.ts b/packages/table/src/cell.ts index cd654c215..bc2dde8e2 100644 --- a/packages/table/src/cell.ts +++ b/packages/table/src/cell.ts @@ -509,7 +509,7 @@ export const Cell = { const { treeIndeterminates } = reactData const { computeCheckboxOpts } = $table.getComputeMaps() const checkboxOpts = computeCheckboxOpts.value - const { labelField, checkField: property, halfField, checkMethod, visibleMethod } = checkboxOpts + const { labelField, checkField, halfField, checkMethod, visibleMethod } = checkboxOpts const { slots } = column const defaultSlot = slots ? slots.default : null const checkboxSlot = slots ? slots.checkbox : null @@ -519,7 +519,7 @@ export const Cell = { let isDisabled = !!checkMethod let ons if (!isHidden) { - isChecked = XEUtils.get(row, property as string) + isChecked = XEUtils.get(row, checkField as string) ons = { onClick (evnt: MouseEvent) { if (!isDisabled && isVisible) { @@ -742,7 +742,7 @@ export const Cell = { const { sortable, filters, editRender } = column let isRequired = false if (editRules) { - const columnRules = XEUtils.get(editRules, params.column.property) as VxeTableDefines.ValidatorRule[] + const columnRules = XEUtils.get(editRules, column.field) as VxeTableDefines.ValidatorRule[] if (columnRules) { isRequired = columnRules.some((rule) => rule.required) } diff --git a/packages/table/src/columnInfo.ts b/packages/table/src/columnInfo.ts index 8fe97ad0c..5c046e74a 100644 --- a/packages/table/src/columnInfo.ts +++ b/packages/table/src/columnInfo.ts @@ -138,7 +138,7 @@ export class ColumnInfo { } getKey () { - return this.property || (this.type ? `type=${this.type}` : null) + return this.field || (this.type ? `type=${this.type}` : null) } update (name: string, value: any) { diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts index abb2eb2c5..416494e46 100644 --- a/packages/table/src/table.ts +++ b/packages/table/src/table.ts @@ -899,16 +899,16 @@ export default defineComponent({ let checkboxColumn: any let radioColumn: any let hasFixed: any - const handleFunc = (column: any, index: any, items: any, path?: any, parent?: any) => { - const { id: colid, property, fixed, type, treeNode } = column + const handleFunc = (column: VxeTableDefines.ColumnInfo, index: number, items: VxeTableDefines.ColumnInfo[], path?: string[], parent?: VxeTableDefines.ColumnInfo) => { + const { id: colid, field, fixed, type, treeNode } = column const rest = { column, colid, index, items, parent } - if (property) { + if (field) { if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') { - if (fullColumnFieldData[property]) { - warnLog('vxe.error.colRepet', ['field', property]) + if (fullColumnFieldData[field]) { + warnLog('vxe.error.colRepet', ['field', field]) } } - fullColumnFieldData[property] = rest + fullColumnFieldData[field] = rest } if (!hasFixed && fixed) { hasFixed = fixed @@ -958,7 +958,7 @@ export default defineComponent({ fullColumnIdData[colid] = rest } if (isGroup) { - XEUtils.eachTree(collectColumn, (column: any, index, items, path, parent, nodes) => { + XEUtils.eachTree(collectColumn, (column, index, items, path, parent, nodes) => { column.level = nodes.length handleFunc(column, index, items, path, parent) }) @@ -1229,7 +1229,7 @@ export default defineComponent({ }[] = [] let orderColumns: VxeTableDefines.SortCheckedParams[] = [] tableFullColumn.forEach((column) => { - const { property, sortable, order, filters } = column + const { field, sortable, order, filters } = column if (!allRemoteFilter && filters && filters.length) { const valueList: any[] = [] const itemList: VxeTableDefines.FilterOption[] = [] @@ -1244,7 +1244,7 @@ export default defineComponent({ } } if (!allRemoteSort && sortable && order) { - orderColumns.push({ column, field: property, property, order, sortTime: column.sortTime }) + orderColumns.push({ column, field, property: field, order, sortTime: column.sortTime }) } }) if (sortMultiple && chronological && orderColumns.length > 1) { @@ -1270,7 +1270,7 @@ export default defineComponent({ } else if (defaultFilterMethod) { return itemList.some((item) => defaultFilterMethod({ value: item.value, option: item, cellValue, row, column, $table: $xetable })) } - return valueList.indexOf(XEUtils.get(row, column.property)) > -1 + return valueList.indexOf(XEUtils.get(row, column.field)) > -1 }) } if (treeConfig && transform) { @@ -1779,7 +1779,7 @@ export default defineComponent({ return new Promise(resolve => { if (loadMethod) { treeLazyLoadeds.push(row) - loadMethod({ $table: $xetable, row }).catch(() => []).then((childRecords: any) => { + loadMethod({ $table: $xetable, row }).then((childRecords: any) => { rest.treeLoaded = true XEUtils.remove(treeLazyLoadeds, item => $xetable.eqRow(item, row)) if (!XEUtils.isArray(childRecords)) { @@ -2014,11 +2014,22 @@ export default defineComponent({ nextTick() .then(() => tableMethods.recalculate()) .then(() => { + let targetScrollLeft = lastScrollLeft + let targetScrollTop = lastScrollTop + const sXOpts = computeSXOpts.value + const sYOpts = computeSYOpts.value + // 是否在更新数据之后自动滚动重置滚动条 + if (sXOpts.scrollToLeftOnChange) { + targetScrollLeft = 0 + } + if (sYOpts.scrollToTopOnChange) { + targetScrollTop = 0 + } // 是否变更虚拟滚动 if (oldScrollYLoad === sYLoad) { - restoreScrollLocation($xetable, lastScrollLeft, lastScrollTop).then(resolve) + restoreScrollLocation($xetable, targetScrollLeft, targetScrollTop).then(resolve) } else { - setTimeout(() => restoreScrollLocation($xetable, lastScrollLeft, lastScrollTop).then(resolve)) + setTimeout(() => restoreScrollLocation($xetable, targetScrollLeft, targetScrollTop).then(resolve)) } }) }) @@ -2689,7 +2700,7 @@ export default defineComponent({ } else { rows.forEach((row: any) => { visibleColumn.forEach((column) => { - if (column.property) { + if (column.field) { setCellValue(row, column, null) } }) @@ -2745,7 +2756,7 @@ export default defineComponent({ return !eqCellValue(oRow, row, field as string) } for (let index = 0, len = visibleColumn.length; index < len; index++) { - property = visibleColumn[index].property + property = visibleColumn[index].field if (property && !eqCellValue(oRow, row, property)) { return true } @@ -2806,14 +2817,14 @@ export default defineComponent({ const treeOpts = computeTreeOpts.value const checkboxOpts = computeCheckboxOpts.value const { transform, children, mapChildren } = treeOpts - const { checkField: property } = checkboxOpts + const { checkField } = checkboxOpts let rowList = [] const currTableData = isFull ? (transform ? tableFullTreeData : tableFullData) : (transform ? afterTreeFullData : afterFullData) - if (property) { + if (checkField) { if (treeConfig) { - rowList = XEUtils.filterTree(currTableData, row => XEUtils.get(row, property), { children: transform ? mapChildren : children }) + rowList = XEUtils.filterTree(currTableData, row => XEUtils.get(row, checkField), { children: transform ? mapChildren : children }) } else { - rowList = currTableData.filter((row) => XEUtils.get(row, property)) + rowList = currTableData.filter((row) => XEUtils.get(row, checkField)) } } else { const { selection } = reactData @@ -2848,8 +2859,9 @@ export default defineComponent({ * 根据行的唯一主键获取行 * @param {String/Number} rowid 行主键 */ - getRowById (rowid) { + getRowById (cellValue) { const { fullDataRowIdData } = internalData + const rowid = XEUtils.eqNull(cellValue) ? '' : encodeURIComponent(cellValue) return fullDataRowIdData[rowid] ? fullDataRowIdData[rowid].row : null }, /** @@ -3042,9 +3054,9 @@ export default defineComponent({ isCheckedByCheckboxRow (row) { const { selection } = reactData const checkboxOpts = computeCheckboxOpts.value - const { checkField: property } = checkboxOpts - if (property) { - return XEUtils.get(row, property) + const { checkField } = checkboxOpts + if (checkField) { + return XEUtils.get(row, checkField) } return $xetable.findRowIndexOf(selection, row) > -1 }, @@ -3069,7 +3081,7 @@ export default defineComponent({ const { afterFullData, checkboxReserveRowMap } = internalData const treeOpts = computeTreeOpts.value const checkboxOpts = computeCheckboxOpts.value - const { checkField: property, reserve, checkStrictly, checkMethod } = checkboxOpts + const { checkField, reserve, checkStrictly, checkMethod } = checkboxOpts let selectRows: any[] = [] const beforeSelection = treeConfig ? [] : selection.filter((row) => $xetable.findRowIndexOf(afterFullData, row) === -1) if (checkStrictly) { @@ -3079,13 +3091,13 @@ export default defineComponent({ * 绑定属性方式（高性能，有污染） * 必须在行数据存在对应的属性，否则将不响应 */ - if (property) { + if (checkField) { const checkValFn = (row: any) => { if (!checkMethod || checkMethod({ row })) { if (value) { selectRows.push(row) } - XEUtils.set(row, property, value) + XEUtils.set(row, checkField, value) } } // 如果存在选中方法 @@ -3157,7 +3169,7 @@ export default defineComponent({ afterFullData.forEach((row) => handleCheckboxReserveRow(row, false)) } } - reactData.selection = property ? [] : beforeSelection.concat(selectRows) + reactData.selection = checkField ? [] : beforeSelection.concat(selectRows) } reactData.treeIndeterminates = [] tablePrivateMethods.checkSelectionStatus() @@ -3253,12 +3265,12 @@ export default defineComponent({ const { tableFullData } = internalData const treeOpts = computeTreeOpts.value const checkboxOpts = computeCheckboxOpts.value - const { checkField: property, reserve } = checkboxOpts - if (property) { + const { checkField, reserve } = checkboxOpts + if (checkField) { if (treeConfig) { - XEUtils.eachTree(tableFullData, item => XEUtils.set(item, property, false), treeOpts) + XEUtils.eachTree(tableFullData, item => XEUtils.set(item, checkField, false), treeOpts) } else { - tableFullData.forEach((item) => XEUtils.set(item, property, false)) + tableFullData.forEach((item) => XEUtils.set(item, checkField, false)) } } if (reserve) { @@ -3456,9 +3468,9 @@ export default defineComponent({ const sortList: VxeTableDefines.SortCheckedParams[] = [] const { tableFullColumn } = internalData tableFullColumn.forEach((column) => { - const { property, order } = column + const { field, order } = column if (column.sortable && order) { - sortList.push({ column, field: property, property, order, sortTime: column.sortTime }) + sortList.push({ column, field, property: field, order, sortTime: column.sortTime }) } }) if (multiple && chronological && sortList.length > 1) { @@ -3480,7 +3492,7 @@ export default defineComponent({ visible: false }) if (visible) { - $xetable.dispatchEvent('filter-visible', { column, property: column.property, filterList: $xetable.getCheckedFilters(), visible: false }, null) + $xetable.dispatchEvent('filter-visible', { column, property: column.field, field: column.field, filterList: $xetable.getCheckedFilters(), visible: false }, null) } return nextTick() }, @@ -4377,7 +4389,8 @@ export default defineComponent({ // } // 如果是按下非功能键之外允许直接编辑 if (selected.column && selected.row && isEnableConf(selected.column.editRender)) { - if (!editOpts.activeMethod || editOpts.activeMethod({ ...selected.args, $table: $xetable })) { + const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod + if (!beforeEditMethod || beforeEditMethod({ ...selected.args, $table: $xetable })) { if (editMethod) { editMethod({ row: selected.row, @@ -4566,8 +4579,8 @@ export default defineComponent({ const checkboxOpts = computeCheckboxOpts.value const rowkey = getRowkey($xetable) internalData.tableFullColumn.forEach(column => { - const { property, editRender } = column - if (property && !XEUtils.has(record, property)) { + const { field, editRender } = column + if (field && !XEUtils.has(record, field)) { let cellValue = null if (editRender) { const { defaultValue } = editRender @@ -4577,7 +4590,7 @@ export default defineComponent({ cellValue = defaultValue } } - XEUtils.set(record, property, cellValue) + XEUtils.set(record, field, cellValue) } }) const otherFields: (string | undefined)[] = [radioOpts.labelField, checkboxOpts.checkField, checkboxOpts.labelField, expandOpts.labelField] @@ -4850,19 +4863,19 @@ export default defineComponent({ const { afterFullData } = internalData const treeOpts = computeTreeOpts.value const checkboxOpts = computeCheckboxOpts.value - const { checkField: property, checkStrictly, checkMethod } = checkboxOpts - if (property) { + const { checkField, checkStrictly, checkMethod } = checkboxOpts + if (checkField) { if (treeConfig && !checkStrictly) { if (value === -1) { if ($xetable.findRowIndexOf(treeIndeterminates, row) === -1) { treeIndeterminates.push(row) } - XEUtils.set(row, property, false) + XEUtils.set(row, checkField, false) } else { // 更新子节点状态 XEUtils.eachTree([row], (item) => { if ($xetable.eqRow(item, row) || (!checkMethod || checkMethod({ row: item }))) { - XEUtils.set(item, property, value) + XEUtils.set(item, checkField, value) XEUtils.remove(treeIndeterminates, half => half === item) handleCheckboxReserveRow(row, value) } @@ -4877,14 +4890,14 @@ export default defineComponent({ if (indeterminatesItem) { parentStatus = -1 } else { - const selectItems = matchObj.items.filter(item => XEUtils.get(item, property)) + const selectItems = matchObj.items.filter(item => XEUtils.get(item, checkField)) parentStatus = selectItems.filter(item => $xetable.findRowIndexOf(vItems, item) > -1).length === vItems.length ? true : (selectItems.length || value === -1 ? -1 : false) } return tablePrivateMethods.handleSelectRow({ row: matchObj.parent }, parentStatus) } } else { if (!checkMethod || checkMethod({ row })) { - XEUtils.set(row, property, value) + XEUtils.set(row, checkField, value) handleCheckboxReserveRow(row, value) } } @@ -5153,9 +5166,9 @@ export default defineComponent({ handleToggleCheckRowEvent (evnt, params) { const { selection } = reactData const checkboxOpts = computeCheckboxOpts.value - const { checkField: property } = checkboxOpts + const { checkField } = checkboxOpts const { row } = params - const value = property ? !XEUtils.get(row, property) : $xetable.findRowIndexOf(selection, row) === -1 + const value = checkField ? !XEUtils.get(row, checkField) : $xetable.findRowIndexOf(selection, row) === -1 if (evnt) { tablePrivateMethods.triggerCheckRowEvent(evnt, params, value) } else { @@ -5265,14 +5278,14 @@ export default defineComponent({ */ triggerSortEvent (evnt, column, order) { const sortOpts = computeSortOpts.value - const property = column.property - if (column.sortable) { + const { field, sortable } = column + if (sortable) { if (!order || column.order === order) { tableMethods.clearSort(sortOpts.multiple ? column : null) } else { - tableMethods.sort({ field: property, order }) + tableMethods.sort({ field, order }) } - const params = { column, property, order: column.order, sortList: tableMethods.getSortColumns() } + const params = { column, field, property: field, order: column.order, sortList: tableMethods.getSortColumns() } tableMethods.dispatchEvent('sort-change', params, evnt) } }, @@ -5814,6 +5827,9 @@ export default defineComponent({ if (props.treeConfig && mouseOpts.area) { errLog('vxe.error.noTree', ['mouse-config.area']) } + // if (props.editConfig && props.editConfig.activeMethod) { + // warnLog('vxe.error.delProp', ['table.edit-config.activeMethod', 'table.edit-config.beforeEditMethod']) + // } } // 检查是否有安装需要的模块 diff --git a/packages/table/src/util.ts b/packages/table/src/util.ts index cf354a1ee..0117d61f7 100644 --- a/packages/table/src/util.ts +++ b/packages/table/src/util.ts @@ -104,12 +104,12 @@ export function toTreePathSeq (path: any[]) { return path.map((num, i) => i % 2 === 0 ? (Number(num) + 1) : '.').join('') } -export function getCellValue (row: any, column: any) { - return XEUtils.get(row, column.property) +export function getCellValue (row: any, column: VxeTableDefines.ColumnInfo) { + return XEUtils.get(row, column.field) } -export function setCellValue (row: any, column: any, value: any) { - return XEUtils.set(row, column.property, value) +export function setCellValue (row: any, column: VxeTableDefines.ColumnInfo, value: any) { + return XEUtils.set(row, column.field, value) } export function getPropClass (property: any, params: any) { diff --git a/public/index.html b/public/index.html index ce2e3e4f3..9dc761522 100644 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,7 @@ + <%= htmlWebpackPlugin.options.title %> diff --git a/public/issues.html b/public/issues.html index ea2bb2e32..5d0c216c9 100644 --- a/public/issues.html +++ b/public/issues.html @@ -5,6 +5,7 @@ + vxe-table 如何通过在线演示来描述问题？