diff --git a/packages/vue/src/grid/src/dragger/src/methods.ts b/packages/vue/src/grid/src/dragger/src/methods.ts index 500718df5..0f81738f3 100644 --- a/packages/vue/src/grid/src/dragger/src/methods.ts +++ b/packages/vue/src/grid/src/dragger/src/methods.ts @@ -27,6 +27,7 @@ export default { // 处理行拖拽 rowDrop() { this.$nextTick(() => { + // refresh:是否在拖拽后刷新数据,默认为true const { plugin, onBeforeMove, filter, refresh = true, trigger } = this.dropConfig this.rowSortable = plugin.create(this.$el.querySelector('.body__wrapper>.tiny-grid__body tbody'), { handle: trigger || '.tiny-grid-body__row', @@ -36,12 +37,15 @@ export default { this.$emit('row-drop-start', event, this) }, onMove: (event) => { - let insertRecords = this.getInsertRecords() + const insertRecords = this.getInsertRecords() // 包含新增数据的表格不可再拖动行顺序 - if (insertRecords.length) return false + if (insertRecords.length) { + return false + } - let { dragged } = event - let selfRow = this.getRowNode(dragged).item + const { dragged } = event + // 获取被拖拽的行,这里在拖拽过程中被频繁触发,待优化 + const selfRow = this.getRowNode(dragged).item const cancel = typeof onBeforeMove === 'function' ? onBeforeMove('row', selfRow, event, this) : true this.$emit('row-drop-move', event, this) diff --git a/packages/vue/src/grid/src/dragger/src/rowDrop.ts b/packages/vue/src/grid/src/dragger/src/rowDrop.ts index cb88c0e49..f99a418c0 100644 --- a/packages/vue/src/grid/src/dragger/src/rowDrop.ts +++ b/packages/vue/src/grid/src/dragger/src/rowDrop.ts @@ -25,6 +25,7 @@ import { findTree } from '@opentiny/vue-renderless/grid/static/' import Modal from '@opentiny/vue-modal' import GlobalConfig from '../../config' +import { isVue2 } from '@opentiny/vue-common' function handleIfScrollYLoadTruthy({ isScrollYLoad, _vm, selfRow, prevTrElem, targetTrElem }) { if (!isScrollYLoad) { @@ -51,25 +52,27 @@ function handleIfScrollYLoadTruthy({ isScrollYLoad, _vm, selfRow, prevTrElem, ta export const createHandlerOnEnd = ({ _vm, refresh }) => { return (event) => { - let insertRecords = _vm.getInsertRecords() + const insertRecords = _vm.getInsertRecords() // 包含新增数据的表格不可再拖动行顺序 - if (insertRecords.length) return false - let options = { children: 'children' } - let targetTrElem = event.item - let { parentNode: wrapperElem, previousElementSibling: prevTrElem } = targetTrElem - let tableTreeData = _vm.data || _vm.tableData - let selfRow = _vm.getRowNode(targetTrElem).item - let selfNode = findTree(tableTreeData, (row) => row === selfRow, options) - let isScrollYLoad = _vm.scrollYLoad - + if (insertRecords.length) { + return false + } + const options = { children: 'children' } + const targetTrElem = event.item + const { parentNode: wrapperElem, previousElementSibling: prevTrElem } = targetTrElem + // 这里优先使用用户通过props传递过来的表格数据,所以拖拽后会改变原始数据 + const tableTreeData = _vm.data || _vm.tableData + const selfRow = _vm.getRowNode(targetTrElem).item + const selfNode = findTree(tableTreeData, (row) => row === selfRow, options) + const isScrollYLoad = _vm.scrollYLoad if (!isScrollYLoad) { if (prevTrElem) { // 移动到节点 - let prevRow = _vm.getRowNode(prevTrElem).item - let prevNode = findTree(tableTreeData, (row) => row === prevRow, options) + const prevRow = _vm.getRowNode(prevTrElem).item + const prevNode = findTree(tableTreeData, (row) => row === prevRow, options) if (findTree(selfRow[options.children], (row) => prevRow === row, options)) { // 错误的移动 - let oldTrElem = wrapperElem.children[event.oldIndex] + const oldTrElem = wrapperElem.children[event.oldIndex] wrapperElem.insertBefore(targetTrElem, oldTrElem) return Modal.message({ @@ -78,7 +81,7 @@ export const createHandlerOnEnd = ({ _vm, refresh }) => { }) } - let currRow = selfNode.items.splice(selfNode.index, 1)[0] + const currRow = selfNode.items.splice(selfNode.index, 1)[0] if (_vm.hasTreeExpand(prevRow)) { // 移动到当前的子节点 prevRow[options.children].splice(0, 0, currRow) @@ -89,7 +92,7 @@ export const createHandlerOnEnd = ({ _vm, refresh }) => { } } else { // 移动到第一行 - let currRow = selfNode.items.splice(selfNode.index, 1)[0] + const currRow = selfNode.items.splice(selfNode.index, 1)[0] tableTreeData.unshift(currRow) _vm.tableFullData = [].concat(tableTreeData) } @@ -98,7 +101,8 @@ export const createHandlerOnEnd = ({ _vm, refresh }) => { handleIfScrollYLoadTruthy({ isScrollYLoad, _vm, selfRow, prevTrElem, targetTrElem }) // 如果变动了树层级,需要刷新数据 _vm.$emit('row-drop-end', event, _vm, _vm.scrollYLoad ? tableTreeData : _vm.tableFullData) - refresh && _vm.data && _vm.refreshData() + // 因为vue2劫持了数组方法,所以在data通过splice改变数组时(数组长度不变)会触发更新,但是vue3是浅层响应,所以需要通过传递数据让表格更新 + refresh && _vm.data && !isVue2 && _vm.refreshData(_vm.data) } } diff --git a/packages/vue/src/grid/src/table/src/methods.ts b/packages/vue/src/grid/src/table/src/methods.ts index eff549c56..7563e0a08 100644 --- a/packages/vue/src/grid/src/table/src/methods.ts +++ b/packages/vue/src/grid/src/table/src/methods.ts @@ -182,10 +182,10 @@ const Methods = { } return this.clearActived() }, - refreshData() { - let next = () => { + refreshData(data) { + const next = () => { this.tableData = [] - return this.loadTableData(this.tableFullData) + return this.loadTableData(data || this.tableFullData) } return this.$nextTick().then(next) }, @@ -233,7 +233,7 @@ const Methods = { let { $refs, editStore, height, maxHeight } = this as any let { lastScrollLeft, lastScrollTop } = this as any let { scrollY } = this.optimizeOpts - // 原始全量数据 + // 对原始数据进行浅拷贝 let tableFullData = isArray(datas) ? datas.slice(0) : [] let scrollYLoad = scrollY && scrollY.gt > 0 && scrollY.gt <= tableFullData.length @@ -246,7 +246,7 @@ const Methods = { // 原始数据 Object.assign(this, { tableSynchData: datas, - // 此处存在性能问题,如果用户表格数据量很大,这里深拷贝会带来性能问题, + // 此处存在性能问题,如果用户表格数据量很大,这里深拷贝会带来性能问题 tableSourceData: clone(tableFullData, true), scrollYLoad }) @@ -367,21 +367,22 @@ const Methods = { fullColumnMap.set(column, colCache) }) }, + // 通过tr的dom元素获取行数据等相关信息 getRowNode(tr) { if (!tr) { return null } - let { fullAllDataRowIdData, tableFullData, treeConfig } = this - let dataRowid = tr.getAttribute('data-rowid') + const { fullAllDataRowIdData, tableFullData, treeConfig } = this + const dataRowid = tr.getAttribute('data-rowid') if (treeConfig) { - let matches = findTree(tableFullData, (row) => getRowid(this, row) === dataRowid, treeConfig) + const matches = findTree(tableFullData, (row) => getRowid(this, row) === dataRowid, treeConfig) if (matches) { return matches } } else { if (fullAllDataRowIdData[dataRowid]) { - let rowCache = fullAllDataRowIdData[dataRowid] + const rowCache = fullAllDataRowIdData[dataRowid] return { item: rowCache.row, index: rowCache.index, diff --git a/packages/vue/src/grid/src/table/src/table.ts b/packages/vue/src/grid/src/table/src/table.ts index af473c7c5..a9ee5041b 100644 --- a/packages/vue/src/grid/src/table/src/table.ts +++ b/packages/vue/src/grid/src/table/src/table.ts @@ -46,6 +46,7 @@ const { SAAS: T_SAAS } = themes const { DEFAULT: V_DEFAULT, CARD: V_CARD, LIST: V_LIST } = viewConfig const { MF_SHOW_LIST: V_MF_LIST } = viewConfig +// 校验插件是否被注册 function verifyConfig(_vm) { if (!getRowkey(_vm)) { error('ui.grid.error.rowIdEmpty') @@ -509,7 +510,7 @@ const getTableData = () => { elemStore: {}, // 表尾高度 footerHeight: 0, - // 缓存数据集 + // 缓存数据集(键为rowid) fullAllDataRowIdData: {}, fullAllDataRowMap: new Map(), fullColumnIdData: {},