vxe-table 4.1.3 → 4.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/README.en.md +3 -3
  2. package/README.md +3 -3
  3. package/README.zh-TW.md +2 -3
  4. package/es/edit/src/hook.js +189 -69
  5. package/es/form/src/form.js +2 -2
  6. package/es/input/src/input.js +8 -2
  7. package/es/table/src/body.js +6 -3
  8. package/es/table/src/table.js +44 -34
  9. package/es/v-x-e-table/src/conf.js +1 -1
  10. package/es/validator/src/hook.js +3 -3
  11. package/lib/edit/src/hook.js +243 -70
  12. package/lib/edit/src/hook.min.js +1 -1
  13. package/lib/form/src/form.js +2 -2
  14. package/lib/form/src/form.min.js +1 -1
  15. package/lib/index.umd.js +772 -209
  16. package/lib/index.umd.min.js +2 -1
  17. package/lib/input/src/input.js +10 -2
  18. package/lib/input/src/input.min.js +1 -1
  19. package/lib/table/src/body.js +6 -3
  20. package/lib/table/src/body.min.js +1 -1
  21. package/lib/table/src/table.js +46 -36
  22. package/lib/table/src/table.min.js +1 -1
  23. package/lib/v-x-e-table/src/conf.js +1 -1
  24. package/lib/v-x-e-table/src/conf.min.js +1 -1
  25. package/lib/validator/src/hook.js +3 -3
  26. package/lib/validator/src/hook.min.js +1 -1
  27. package/package.json +4 -27
  28. package/packages/edit/src/hook.ts +183 -69
  29. package/packages/form/src/form.ts +2 -2
  30. package/packages/input/src/input.ts +9 -2
  31. package/packages/table/src/body.ts +6 -3
  32. package/packages/table/src/table.ts +43 -32
  33. package/packages/v-x-e-table/src/conf.ts +1 -1
  34. package/packages/v-x-e-table/src/renderer.ts +1 -1
  35. package/packages/validator/src/hook.ts +3 -3
  36. package/types/edit.d.ts +6 -3
  37. package/types/index.d.ts +1 -1
  38. package/types/plugins/pro.d.ts +6 -6
  39. package/types/table.d.ts +5 -0
  40. package/types/v-x-e-table/renderer.d.ts +4 -2
@@ -2121,8 +2121,10 @@ export default defineComponent({
2121
2121
  const { treeFullData } = internalData
2122
2122
  const treeOpts = computeTreeOpts.value
2123
2123
  const fullData: any[] = []
2124
+ const expandMaps: Map<any, number> = new Map()
2124
2125
  XEUtils.eachTree(treeFullData, (row, index, items, path, parent) => {
2125
- if (!parent || $xetable.findRowIndexOf(treeExpandeds, parent) > -1) {
2126
+ if (!parent || (expandMaps.has(parent) && $xetable.findRowIndexOf(treeExpandeds, parent) > -1)) {
2127
+ expandMaps.set(row, 1)
2126
2128
  fullData.push(row)
2127
2129
  }
2128
2130
  }, treeOpts)
@@ -2311,16 +2313,12 @@ export default defineComponent({
2311
2313
  const oRow = tableSourceData[rowIndex]
2312
2314
  if (oRow && row) {
2313
2315
  if (field) {
2314
- XEUtils.set(oRow, field, XEUtils.get(record || row, field))
2316
+ const newValue = XEUtils.get(record || row, field)
2317
+ XEUtils.set(row, field, newValue)
2318
+ XEUtils.set(oRow, field, newValue)
2315
2319
  } else {
2316
- if (record) {
2317
- tableSourceData[rowIndex] = record
2318
- XEUtils.clear(row, undefined)
2319
- Object.assign(row, tablePrivateMethods.defineField(Object.assign({}, record)))
2320
- tablePrivateMethods.cacheRowMap(true)
2321
- } else {
2322
- XEUtils.destructuring(oRow, XEUtils.clone(row, true))
2323
- }
2320
+ const newRecord = XEUtils.clone({ ...record }, true)
2321
+ XEUtils.destructuring(oRow, Object.assign(row, newRecord))
2324
2322
  }
2325
2323
  }
2326
2324
  reactData.tableData = tableData.slice(0)
@@ -2339,8 +2337,8 @@ export default defineComponent({
2339
2337
  const { tableSourceData, fullDataRowIdData, fullAllDataRowIdData } = internalData
2340
2338
  const treeOpts = computeTreeOpts.value
2341
2339
  const { children } = treeOpts
2342
- const rest = fullAllDataRowIdData[getRowid($xetable, row)]
2343
- const parentLevel = rest ? rest.level : 0
2340
+ const parentRest = fullAllDataRowIdData[getRowid($xetable, row)]
2341
+ const parentLevel = parentRest ? parentRest.level : 0
2344
2342
  return tableMethods.createData(childRecords).then((rows) => {
2345
2343
  if (keepSource) {
2346
2344
  const rowid = getRowid($xetable, row)
@@ -3088,6 +3086,16 @@ export default defineComponent({
3088
3086
  const treeOpts = computeTreeOpts.value
3089
3087
  const reserveSelection: any[] = []
3090
3088
  if (checkboxOpts.reserve) {
3089
+ const afterFullIdMaps: { [key: string]: number } = {}
3090
+ if (treeConfig) {
3091
+ XEUtils.eachTree(afterFullData, row => {
3092
+ afterFullIdMaps[getRowid($xetable, row)] = 1
3093
+ }, treeOpts)
3094
+ } else {
3095
+ afterFullData.forEach(row => {
3096
+ afterFullIdMaps[getRowid($xetable, row)] = 1
3097
+ })
3098
+ }
3091
3099
  XEUtils.each(checkboxReserveRowMap, (oldRow, oldRowid) => {
3092
3100
  if (oldRow) {
3093
3101
  if (isFull) {
@@ -3095,14 +3103,8 @@ export default defineComponent({
3095
3103
  reserveSelection.push(oldRow)
3096
3104
  }
3097
3105
  } else {
3098
- if (treeConfig) {
3099
- if (!XEUtils.findTree(afterFullData, row => getRowid($xetable, row) === oldRowid, treeOpts)) {
3100
- reserveSelection.push(oldRow)
3101
- }
3102
- } else {
3103
- if (!afterFullData.some(row => getRowid($xetable, row) === oldRowid)) {
3104
- reserveSelection.push(oldRow)
3105
- }
3106
+ if (!afterFullIdMaps[oldRowid]) {
3107
+ reserveSelection.push(oldRow)
3106
3108
  }
3107
3109
  }
3108
3110
  }
@@ -3152,11 +3154,12 @@ export default defineComponent({
3152
3154
  * @param {Row} row 行对象
3153
3155
  */
3154
3156
  setCurrentRow (row) {
3157
+ const rowOpts = computeRowOpts.value
3155
3158
  const el = refElem.value
3156
3159
  tableMethods.clearCurrentRow()
3157
3160
  tableMethods.clearCurrentColumn()
3158
3161
  reactData.currentRow = row
3159
- if (props.highlightCurrentRow) {
3162
+ if (rowOpts.isCurrent || props.highlightCurrentRow) {
3160
3163
  if (el) {
3161
3164
  XEUtils.arrayEach(el.querySelectorAll(`[rowid="${getRowid($xetable, row)}"]`), elem => addClass(elem, 'row--current'))
3162
3165
  }
@@ -3202,7 +3205,8 @@ export default defineComponent({
3202
3205
  * 用于当前行,获取当前行的数据
3203
3206
  */
3204
3207
  getCurrentRecord () {
3205
- return props.highlightCurrentRow ? reactData.currentRow : null
3208
+ const rowOpts = computeRowOpts.value
3209
+ return rowOpts.isCurrent || props.highlightCurrentRow ? reactData.currentRow : null
3206
3210
  },
3207
3211
  /**
3208
3212
  * 用于单选行,获取当已选中的数据
@@ -3235,7 +3239,8 @@ export default defineComponent({
3235
3239
  return null
3236
3240
  },
3237
3241
  getCurrentColumn () {
3238
- return props.highlightCurrentColumn ? reactData.currentColumn : null
3242
+ const columnOpts = computeColumnOpts.value
3243
+ return columnOpts.isCurrent || props.highlightCurrentColumn ? reactData.currentColumn : null
3239
3244
  },
3240
3245
  /**
3241
3246
  * 用于当前列,设置某列行为高亮状态
@@ -4032,6 +4037,7 @@ export default defineComponent({
4032
4037
  const editOpts = computeEditOpts.value
4033
4038
  const treeOpts = computeTreeOpts.value
4034
4039
  const menuList = computeMenuList.value
4040
+ const rowOpts = computeRowOpts.value
4035
4041
  const { selected, actived } = editStore
4036
4042
  const keyCode = evnt.keyCode
4037
4043
  const isEsc = hasEventKey(evnt, EVENT_KEYS.ESCAPE)
@@ -4104,7 +4110,7 @@ export default defineComponent({
4104
4110
  keyCtxTimeout = setTimeout(() => {
4105
4111
  internalData._keyCtx = false
4106
4112
  }, 1000)
4107
- } else if (isEnter && !isAltKey && keyboardConfig && keyboardOpts.isEnter && (selected.row || actived.row || (treeConfig && highlightCurrentRow && currentRow))) {
4113
+ } else if (isEnter && !isAltKey && keyboardConfig && keyboardOpts.isEnter && (selected.row || actived.row || (treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow))) {
4108
4114
  // 退出选中
4109
4115
  if (hasCtrlKey) {
4110
4116
  // 如果是激活编辑状态,则取消编辑
@@ -4133,7 +4139,7 @@ export default defineComponent({
4133
4139
  $xetable.moveSelected(targetArgs, isLeftArrow, false, isRightArrow, true, evnt)
4134
4140
  }
4135
4141
  }
4136
- } else if (treeConfig && highlightCurrentRow && currentRow) {
4142
+ } else if (treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow) {
4137
4143
  // 如果是树形表格当前行回车移动到子节点
4138
4144
  const childrens = currentRow[treeOpts.children]
4139
4145
  if (childrens && childrens.length) {
@@ -4156,7 +4162,7 @@ export default defineComponent({
4156
4162
  // 如果按下了方向键
4157
4163
  if (selected.row && selected.column) {
4158
4164
  $xetable.moveSelected(selected.args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt)
4159
- } else if ((isUpArrow || isDwArrow) && highlightCurrentRow) {
4165
+ } else if ((isUpArrow || isDwArrow) && (rowOpts.isCurrent || highlightCurrentRow)) {
4160
4166
  // 当前行按键上下移动
4161
4167
  $xetable.moveCurrentRow(isUpArrow, isDwArrow, evnt)
4162
4168
  }
@@ -4168,7 +4174,7 @@ export default defineComponent({
4168
4174
  } else if (actived.row || actived.column) {
4169
4175
  $xetable.moveTabSelected(actived.args, hasShiftKey, evnt)
4170
4176
  }
4171
- } else if (keyboardConfig && isEnableConf(editConfig) && (isDel || (treeConfig && highlightCurrentRow && currentRow ? isBack && keyboardOpts.isArrow : isBack))) {
4177
+ } else if (keyboardConfig && isEnableConf(editConfig) && (isDel || (treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow ? isBack && keyboardOpts.isArrow : isBack))) {
4172
4178
  if (!isEditStatus) {
4173
4179
  const { delMethod, backMethod } = keyboardOpts
4174
4180
  // 如果是删除键
@@ -4200,7 +4206,7 @@ export default defineComponent({
4200
4206
  // 如果按下 del 键,更新表尾数据
4201
4207
  tableMethods.updateFooter()
4202
4208
  }
4203
- } else if (isBack && keyboardOpts.isArrow && treeConfig && highlightCurrentRow && currentRow) {
4209
+ } else if (isBack && keyboardOpts.isArrow && treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow) {
4204
4210
  // 如果树形表格回退键关闭当前行返回父节点
4205
4211
  const { parent: parentRow } = XEUtils.findTree(internalData.afterFullData, item => item === currentRow, treeOpts)
4206
4212
  if (parentRow) {
@@ -4825,6 +4831,7 @@ export default defineComponent({
4825
4831
  triggerHeaderCellClickEvent (evnt, params) {
4826
4832
  const { _lastResizeTime } = internalData
4827
4833
  const sortOpts = computeSortOpts.value
4834
+ const columnOpts = computeColumnOpts.value
4828
4835
  const { column } = params
4829
4836
  const cell = evnt.currentTarget
4830
4837
  const triggerResizable = _lastResizeTime && _lastResizeTime > Date.now() - 300
@@ -4834,7 +4841,7 @@ export default defineComponent({
4834
4841
  tablePrivateMethods.triggerSortEvent(evnt, column, getNextSortOrder(column))
4835
4842
  }
4836
4843
  tableMethods.dispatchEvent('header-cell-click', Object.assign({ triggerResizable, triggerSort, triggerFilter, cell }, params), evnt)
4837
- if (props.highlightCurrentColumn) {
4844
+ if (columnOpts.isCurrent || props.highlightCurrentColumn) {
4838
4845
  tableMethods.setCurrentColumn(column)
4839
4846
  }
4840
4847
  },
@@ -4854,6 +4861,7 @@ export default defineComponent({
4854
4861
  const treeOpts = computeTreeOpts.value
4855
4862
  const radioOpts = computeRadioOpts.value
4856
4863
  const checkboxOpts = computeCheckboxOpts.value
4864
+ const rowOpts = computeRowOpts.value
4857
4865
  const { actived } = editStore
4858
4866
  const { row, column } = params
4859
4867
  const { type, treeNode } = column
@@ -4880,7 +4888,7 @@ export default defineComponent({
4880
4888
  if (!triggerTreeNode) {
4881
4889
  if (!triggerExpandNode) {
4882
4890
  // 如果是高亮行
4883
- if (highlightCurrentRow) {
4891
+ if (rowOpts.isCurrent || highlightCurrentRow) {
4884
4892
  if (!triggerCheckbox && !triggerRadio) {
4885
4893
  tablePrivateMethods.triggerCurrentRowEvent(evnt, params)
4886
4894
  }
@@ -5187,6 +5195,7 @@ export default defineComponent({
5187
5195
  tablePrivateMethods.handleTableData()
5188
5196
  tablePrivateMethods.updateScrollYSpace()
5189
5197
  },
5198
+ updateVirtualTreeData,
5190
5199
  /**
5191
5200
  * 处理固定列的显示状态
5192
5201
  */
@@ -5675,6 +5684,8 @@ export default defineComponent({
5675
5684
  const { leftList, rightList } = columnStore
5676
5685
  const tooltipOpts = computeTooltipOpts.value
5677
5686
  const treeOpts = computeTreeOpts.value
5687
+ const rowOpts = computeRowOpts.value
5688
+ const columnOpts = computeColumnOpts.value
5678
5689
  const vSize = computeSize.value
5679
5690
  const tableBorder = computeTableBorder.value
5680
5691
  const mouseOpts = computeMouseOpts.value
@@ -5689,8 +5700,8 @@ export default defineComponent({
5689
5700
  'cell--highlight': highlightCell,
5690
5701
  'cell--selected': mouseConfig && mouseOpts.selected,
5691
5702
  'cell--area': mouseConfig && mouseOpts.area,
5692
- 'row--highlight': highlightHoverRow,
5693
- 'column--highlight': highlightHoverColumn,
5703
+ 'row--highlight': rowOpts.isHover || highlightHoverRow,
5704
+ 'column--highlight': columnOpts.isHover || highlightHoverColumn,
5694
5705
  'is--header': showHeader,
5695
5706
  'is--footer': showFooter,
5696
5707
  'is--group': isGroup,
@@ -13,6 +13,7 @@ const GlobalConfig: VXETableGlobalConfig = {
13
13
  showHeader: true,
14
14
  animat: true,
15
15
  delayHover: 250,
16
+ autoResize: true,
16
17
  // keepSource: false,
17
18
  // showOverflow: null,
18
19
  // showHeaderOverflow: null,
@@ -20,7 +21,6 @@ const GlobalConfig: VXETableGlobalConfig = {
20
21
  // resizeInterval: 500,
21
22
  // size: null,
22
23
  // zIndex: null,
23
- // autoResize: false,
24
24
  // stripe: false,
25
25
  // border: false,
26
26
  // round: false,
@@ -685,7 +685,7 @@ export const renderer: VxeGlobalRenderer = {
685
685
  XEUtils.each(opts, (options, name) => renderer.add(name, options))
686
686
  return renderer
687
687
  },
688
- get (name) {
688
+ get (name: string) {
689
689
  return renderMap[name] || null
690
690
  },
691
691
  add (name, options) {
@@ -149,21 +149,21 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
149
149
  const ruleProps = Object.keys(validRest)
150
150
  return nextTick().then(() => {
151
151
  if (ruleProps.length) {
152
- return Promise.reject(validRest[ruleProps[0]][0])
152
+ return validRest[ruleProps[0]][0]
153
153
  }
154
154
  if (cb) {
155
155
  cb()
156
156
  }
157
157
  })
158
158
  }).catch(firstErrParams => {
159
- return new Promise<void>((resolve, reject) => {
159
+ return new Promise<void>((resolve) => {
160
160
  const finish = () => {
161
161
  nextTick(() => {
162
162
  if (cb) {
163
163
  cb(validRest)
164
164
  resolve()
165
165
  } else {
166
- reject(validRest)
166
+ resolve(validRest)
167
167
  }
168
168
  })
169
169
  }
package/types/edit.d.ts CHANGED
@@ -13,9 +13,12 @@ export interface TableEditMethods {
13
13
  */
14
14
  insert(records: RecordInfo | RecordInfo[]): Promise<{ row: any, rows: any[] }>;
15
15
  /**
16
- * 往表格插入临时数据,从指定位置插入一行或多行;第二个参数:row 指定位置、null从第一行插入、-1 从最后插入
17
- * @param records 新数据
18
- * @param row 指定行
16
+ * 往表格指定行中插入临时数据
17
+ * 如果 row 为空则从插入到顶部,如果为树结构,则插入到目标节点顶部
18
+ * 如果 row 为 -1 则从插入到底部,如果为树结构,则插入到目标节点底部
19
+ * 如果 row 为有效行则插入到该行的位置,如果为树结构,则有插入到效的目标节点该行的位置
20
+ * @param {Object/Array} records 新的数据
21
+ * @param {Row} row 指定行
19
22
  */
20
23
  insertAt(records: RecordInfo | RecordInfo[], row: any | -1 | null): Promise<{ row: any, rows: any[] }>;
21
24
  /**
package/types/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as VXETableExport from './all'
2
2
 
3
3
  /**
4
- * 一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...
4
+ * 一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...
5
5
  */
6
6
  declare const VXETable: typeof VXETableExport
7
7
 
@@ -28,9 +28,9 @@ export interface VxeTableProMethods {
28
28
  */
29
29
  pasteCellArea(): Promise<any>;
30
30
  /**
31
- * 用于 mouse-config.area,用于清除鼠标选择的区域
31
+ * 用于 mouse-config.area,用于清除鼠标选择的区域,可以指定清除的区域
32
32
  */
33
- clearCellAreas(): Promise<any>;
33
+ clearCellAreas(area?: number | VxeTableProDefines.MouseCellArea): Promise<any>;
34
34
  /**
35
35
  * 用于 mouse-config.area,手动清除标记为复制粘贴的区域
36
36
  */
@@ -40,9 +40,9 @@ export interface VxeTableProMethods {
40
40
  * @param areaConfigs 指定区域
41
41
  */
42
42
  setCellAreas(areaConfigs: VxeTableProDefines.CellAreaConfig[], activeArea?: {
43
- area?: VxeTableProDefines.CellAreaConfig;
44
- column: VxeTableDefines.ColumnInfo;
45
- row: any;
43
+ area?: number | VxeTableProDefines.CellAreaConfig;
44
+ column?: number | VxeTableDefines.ColumnInfo;
45
+ row?: any;
46
46
  }): Promise<any>;
47
47
  /**
48
48
  * 用于 mouse-config.area,设置活动的区域的单元格
@@ -148,7 +148,7 @@ export namespace VxeTableProDefines {
148
148
  }
149
149
 
150
150
  export interface ActiveCellAreaConfig {
151
- area: VxeTableProDefines.MouseCellArea;
151
+ area: VxeTableProDefines.MouseCellArea | number;
152
152
  column: VxeTableDefines.ColumnInfo | number;
153
153
  row: any;
154
154
  }
package/types/table.d.ts CHANGED
@@ -707,6 +707,7 @@ export interface TablePrivateMethods {
707
707
  updateScrollYSpace(): void;
708
708
  updateScrollXData(): void;
709
709
  updateScrollYData(): void;
710
+ updateVirtualTreeData(): Promise<any>;
710
711
  checkScrolling(): void;
711
712
  updateZindex(): void;
712
713
  updateCellAreas(): void;
@@ -1208,6 +1209,8 @@ export namespace VxeTablePropTypes {
1208
1209
  * 列配置信息
1209
1210
  */
1210
1211
  export interface ColumnConfig {
1212
+ isCurrent?: boolean;
1213
+ isHover?: boolean;
1211
1214
  resizable?: VxeColumnPropTypes.Resizable;
1212
1215
  width?: VxeColumnPropTypes.Width;
1213
1216
  minWidth?: VxeColumnPropTypes.MinWidth;
@@ -1218,6 +1221,8 @@ export namespace VxeTablePropTypes {
1218
1221
  * 行配置信息
1219
1222
  */
1220
1223
  export interface RowConfig {
1224
+ isCurrent?: boolean;
1225
+ isHover?: boolean;
1221
1226
  height?: number;
1222
1227
  }
1223
1228
  export interface RowOpts extends RowConfig { }
@@ -17,6 +17,8 @@ export interface DefineRendererOption<T> {
17
17
  filterRemoteMethod?(params: VxeGlobalRendererHandles.FilterRemoteMethod): boolean;
18
18
  filterResetMethod?(params: VxeGlobalRendererHandles.FilterResetMethodParams): void;
19
19
  filterRecoverMethod?(params: VxeGlobalRendererHandles.FilterRecoverMethodParams): void;
20
+ // 默认行为
21
+ defaultFilterMethod?(params: VxeGlobalRendererHandles.FilterMethodParams): boolean;
20
22
 
21
23
  // 单元格渲染
22
24
  renderHeader?(renderOpts: VxeGlobalRendererHandles.RenderHeaderOptions, params: VxeGlobalRendererHandles.RenderHeaderParams): T;
@@ -197,7 +199,7 @@ export namespace VxeGlobalRendererHandles {
197
199
  /**
198
200
  * 渲染器名称
199
201
  */
200
- name: string;
202
+ name?: string;
201
203
  /**
202
204
  * 目标组件渲染的参数
203
205
  */
@@ -246,7 +248,7 @@ export interface VxeGlobalRenderer {
246
248
  mixin(options: {
247
249
  [name: string]: RendererOptions;
248
250
  }): VxeGlobalRenderer;
249
- get(name: string): DefineRendererOption<VxeGlobalRendererHandles.RenderResult>;
251
+ get(name: string | null | undefined): DefineRendererOption<VxeGlobalRendererHandles.RenderResult>;
250
252
  add(name: string, options: RendererOptions): VxeGlobalRenderer;
251
253
  delete(name: string): void;
252
254
  }