From 725814b35526e1aa8d4f054bf5220d934d024425 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= Date: Tue, 7 Jan 2020 16:17:18 +0800 Subject: [PATCH] Table tree support @on-select, @on-select-cancel, @on-selection-change events --- examples/routers/table.vue | 14 ++++- src/components/table/cell.vue | 6 +- src/components/table/table-body.vue | 10 +++- src/components/table/table.vue | 89 +++++++++++++++++++++++------ 4 files changed, 94 insertions(+), 25 deletions(-) diff --git a/examples/routers/table.vue b/examples/routers/table.vue index f4f9a668..4d73d428 100644 --- a/examples/routers/table.vue +++ b/examples/routers/table.vue @@ -6,6 +6,8 @@ @on-current-change="occ" @on-row-click="orc" @on-row-dblclick="ordc" + @on-select="os" + @on-select-cancel="osc" ref="selection" :columns="columns4" :data="data1" @@ -156,8 +158,16 @@ // console.log(index); }, ordc (data, index) { - console.log(data); - console.log(index); + // console.log(data); + // console.log(index); + }, + os (s, r) { + console.log(s); + console.log(r); + }, + osc (s, r) { + console.log(s); + console.log(r); } } } diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue index e61dbffc..6d450092 100644 --- a/src/components/table/cell.vue +++ b/src/components/table/cell.vue @@ -133,7 +133,11 @@ }, methods: { toggleSelect () { - this.$parent.$parent.$parent.toggleSelect(this.index); + if (this.treeNode) { + this.$parent.$parent.$parent.toggleSelect(this.index, this.row._rowKey); + } else { + this.$parent.$parent.$parent.toggleSelect(this.index); + } }, toggleExpand () { this.$parent.$parent.$parent.toggleExpand(this.index); diff --git a/src/components/table/table-body.vue b/src/components/table/table-body.vue index 95670bf8..0e37d99a 100644 --- a/src/components/table/table-body.vue +++ b/src/components/table/table-body.vue @@ -95,6 +95,10 @@ rowExpanded (_index) { return this.objData[_index] && this.objData[_index]._isExpanded; }, + rowStatusByRowKey (type, rowKey) { + const data = this.$parent.getDataByRowKey(rowKey); + return data[type]; + }, handleMouseIn (_index, event, rowKey) { event.stopPropagation(); this.$parent.handleMouseIn(_index, rowKey); @@ -182,9 +186,9 @@ column: column, 'natural-index': index, index: row._index, - checked: this.rowChecked(row._index), - disabled: this.rowDisabled(row._index), - expanded: this.rowExpanded(row._index), + checked: this.rowStatusByRowKey('_isChecked', row._rowKey), + disabled: this.rowStatusByRowKey('_isDisabled', row._rowKey), + expanded: this.rowStatusByRowKey('_isExpanded', row._rowKey), treeNode: true, treeLevel: level }, diff --git a/src/components/table/table.vue b/src/components/table/table.vue index a2fb247b..8ca36519 100644 --- a/src/components/table/table.vue +++ b/src/components/table/table.vue @@ -646,7 +646,7 @@ if (oldIndex >= 0) { oldData = JSON.parse(JSON.stringify(this.cloneData[oldIndex])); } - const newData = type === 'highlight' ? rowKey ? JSON.parse(JSON.stringify(this.getCloneDataByRowKey(rowKey))) : JSON.parse(JSON.stringify(this.cloneData[_index])) : null; + const newData = type === 'highlight' ? rowKey ? JSON.parse(JSON.stringify(this.getBaseDataByRowKey(rowKey))) : JSON.parse(JSON.stringify(this.cloneData[_index])) : null; this.$emit('on-current-change', newData, oldData); }, handleResetChildrenRow (objData) { @@ -677,7 +677,7 @@ clickCurrentRow (_index, rowKey) { this.highlightCurrentRow (_index, rowKey); if (rowKey) { - this.$emit('on-row-click', JSON.parse(JSON.stringify(this.getCloneDataByRowKey(rowKey)))); + this.$emit('on-row-click', JSON.parse(JSON.stringify(this.getBaseDataByRowKey(rowKey)))); } else { this.$emit('on-row-click', JSON.parse(JSON.stringify(this.cloneData[_index])), _index); } @@ -685,33 +685,84 @@ dblclickCurrentRow (_index, rowKey) { this.highlightCurrentRow (_index, rowKey); if (rowKey) { - this.$emit('on-row-dblclick', JSON.parse(JSON.stringify(this.getCloneDataByRowKey(rowKey)))); + this.$emit('on-row-dblclick', JSON.parse(JSON.stringify(this.getBaseDataByRowKey(rowKey)))); } else { this.$emit('on-row-dblclick', JSON.parse(JSON.stringify(this.cloneData[_index])), _index); } }, getSelection () { + // 分别拿根数据和子数据的已选项 let selectionIndexes = []; + let selectionRowKeys = []; for (let i in this.objData) { - if (this.objData[i]._isChecked) selectionIndexes.push(parseInt(i)); + const objData = this.objData[i]; + if (objData._isChecked) selectionIndexes.push(parseInt(i)); + if (objData.children && objData.children.length) { + selectionRowKeys = selectionRowKeys.concat(this.getSelectionChildrenRowKeys(objData, selectionRowKeys)); + } } - return JSON.parse(JSON.stringify(this.data.filter((data, index) => selectionIndexes.indexOf(index) > -1))); + + // 去重的 RowKeys + selectionRowKeys = [...new Set(selectionRowKeys)]; + + let selection = []; + + this.data.forEach((item, index) => { + if (selectionIndexes.indexOf(index) > -1) { + selection = selection.concat(item); + } + if (item.children && item.children.length && selectionRowKeys.length) { + selection = selection.concat(this.getSelectionChildren(item, selection, selectionRowKeys)); + } + }); + + + selection = [...new Set(selection)]; + return JSON.parse(JSON.stringify(selection)); }, - toggleSelect (_index) { + getSelectionChildrenRowKeys (objData, selectionRowKeys) { + if (objData.children && objData.children.length) { + objData.children.forEach(item => { + if (item._isChecked) selectionRowKeys.push(item._rowKey); + if (item.children && item.children.length) { + selectionRowKeys = selectionRowKeys.concat(this.getSelectionChildrenRowKeys(item, selectionRowKeys)); + } + }); + } + return selectionRowKeys; + }, + getSelectionChildren (data, selection, selectionRowKeys) { + if (data.children && data.children.length) { + data.children.forEach(item => { + if (selectionRowKeys.indexOf(item[this.rowKey]) > -1) { + selection = selection.concat(item); + } + if (item.children && item.children.length) { + selection = selection.concat(this.getSelectionChildren(item, selection, selectionRowKeys)); + } + }); + } + return selection; + }, + toggleSelect (_index, rowKey) { let data = {}; - for (let i in this.objData) { - if (parseInt(i) === _index) { - data = this.objData[i]; - break; + if (rowKey) { + data = this.getDataByRowKey(rowKey); + } else { + for (let i in this.objData) { + if (parseInt(i) === _index) { + data = this.objData[i]; + break; + } } } const status = !data._isChecked; - this.objData[_index]._isChecked = status; - + data._isChecked = status; const selection = this.getSelection(); - this.$emit(status ? 'on-select' : 'on-select-cancel', selection, JSON.parse(JSON.stringify(this.data[_index]))); + const selectedData = rowKey ? this.getBaseDataByRowKey(rowKey, this.data) : this.data[_index]; + this.$emit(status ? 'on-select' : 'on-select-cancel', selection, JSON.parse(JSON.stringify(selectedData))); this.$emit('on-selection-change', selection); }, toggleExpand (_index) { @@ -763,20 +814,20 @@ } return data; }, - getCloneDataByRowKey (rowKey) { + getBaseDataByRowKey (rowKey, sourceData = this.cloneData) { let data = null; - for (let i = 0; i < this.cloneData.length; i++) { - const thisData = this.cloneData[i]; + for (let i = 0; i < sourceData.length; i++) { + const thisData = sourceData[i]; if (thisData[this.rowKey] === rowKey) { data = thisData; break; } else if (thisData.children && thisData.children.length) { - data = this.getChildrenCloneDataByRowKey(rowKey, thisData); + data = this.getChildrenDataByRowKey(rowKey, thisData); } } return data; }, - getChildrenCloneDataByRowKey (rowKey, cloneData) { + getChildrenDataByRowKey (rowKey, cloneData) { let data = null; if (cloneData.children && cloneData.children.length) { for (let i = 0; i < cloneData.children.length; i++) { @@ -785,7 +836,7 @@ data = item; break; } else if (item.children && item.children.length) { - data = this.getChildrenCloneDataByRowKey(rowKey, item); + data = this.getChildrenDataByRowKey(rowKey, item); } } }