drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Table tree support @on-select, @on-select-cancel, @on-selection-change events

Browse source
This commit is contained in:
梁灏 2020-01-07 16:17:18 +08:00
parent 20fb34b2b0
commit 725814b355
4 changed files with 94 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
examples/routers/table.vue
View file

@ -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);
}
}
}

6
src/components/table/cell.vue
View file

@ -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);

10
src/components/table/table-body.vue
View file

@ -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
},

89
src/components/table/table.vue
View file

@ -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);
}
}
}