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-current-change="occ"
@on-row-click="orc" @on-row-click="orc"
@on-row-dblclick="ordc" @on-row-dblclick="ordc"
@on-select="os"
@on-select-cancel="osc"
ref="selection" ref="selection"
:columns="columns4" :columns="columns4"
:data="data1" :data="data1"
@ -156,8 +158,16 @@
// console.log(index); // console.log(index);
}, },
ordc (data, index) { ordc (data, index) {
console.log(data); // console.log(data);
console.log(index); // 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: { methods: {
toggleSelect () { 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 () { toggleExpand () {
this.$parent.$parent.$parent.toggleExpand(this.index); this.$parent.$parent.$parent.toggleExpand(this.index);

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

@ -95,6 +95,10 @@
rowExpanded (_index) { rowExpanded (_index) {
return this.objData[_index] && this.objData[_index]._isExpanded; return this.objData[_index] && this.objData[_index]._isExpanded;
}, },
rowStatusByRowKey (type, rowKey) {
const data = this.$parent.getDataByRowKey(rowKey);
return data[type];
},
handleMouseIn (_index, event, rowKey) { handleMouseIn (_index, event, rowKey) {
event.stopPropagation(); event.stopPropagation();
this.$parent.handleMouseIn(_index, rowKey); this.$parent.handleMouseIn(_index, rowKey);
@ -182,9 +186,9 @@
column: column, column: column,
'natural-index': index, 'natural-index': index,
index: row._index, index: row._index,
checked: this.rowChecked(row._index), checked: this.rowStatusByRowKey('_isChecked', row._rowKey),
disabled: this.rowDisabled(row._index), disabled: this.rowStatusByRowKey('_isDisabled', row._rowKey),
expanded: this.rowExpanded(row._index), expanded: this.rowStatusByRowKey('_isExpanded', row._rowKey),
treeNode: true, treeNode: true,
treeLevel: level treeLevel: level
}, },

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

@ -646,7 +646,7 @@
if (oldIndex >= 0) { if (oldIndex >= 0) {
oldData = JSON.parse(JSON.stringify(this.cloneData[oldIndex])); 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); this.$emit('on-current-change', newData, oldData);
}, },
handleResetChildrenRow (objData) { handleResetChildrenRow (objData) {
@ -677,7 +677,7 @@
clickCurrentRow (_index, rowKey) { clickCurrentRow (_index, rowKey) {
this.highlightCurrentRow (_index, rowKey); this.highlightCurrentRow (_index, rowKey);
if (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 { } else {
this.$emit('on-row-click', JSON.parse(JSON.stringify(this.cloneData[_index])), _index); this.$emit('on-row-click', JSON.parse(JSON.stringify(this.cloneData[_index])), _index);
} }
@ -685,33 +685,84 @@
dblclickCurrentRow (_index, rowKey) { dblclickCurrentRow (_index, rowKey) {
this.highlightCurrentRow (_index, rowKey); this.highlightCurrentRow (_index, rowKey);
if (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 { } else {
this.$emit('on-row-dblclick', JSON.parse(JSON.stringify(this.cloneData[_index])), _index); this.$emit('on-row-dblclick', JSON.parse(JSON.stringify(this.cloneData[_index])), _index);
} }
}, },
getSelection () { getSelection () {
// 分别拿根数据和子数据的已选项
let selectionIndexes = []; let selectionIndexes = [];
let selectionRowKeys = [];
for (let i in this.objData) { 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 = {}; let data = {};
for (let i in this.objData) { if (rowKey) {
if (parseInt(i) === _index) { data = this.getDataByRowKey(rowKey);
data = this.objData[i]; } else {
break; for (let i in this.objData) {
if (parseInt(i) === _index) {
data = this.objData[i];
break;
}
} }
} }
const status = !data._isChecked; const status = !data._isChecked;
this.objData[_index]._isChecked = status; data._isChecked = status;
const selection = this.getSelection(); 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); this.$emit('on-selection-change', selection);
}, },
toggleExpand (_index) { toggleExpand (_index) {
@ -763,20 +814,20 @@
} }
return data; return data;
}, },
getCloneDataByRowKey (rowKey) { getBaseDataByRowKey (rowKey, sourceData = this.cloneData) {
let data = null; let data = null;
for (let i = 0; i < this.cloneData.length; i++) { for (let i = 0; i < sourceData.length; i++) {
const thisData = this.cloneData[i]; const thisData = sourceData[i];
if (thisData[this.rowKey] === rowKey) { if (thisData[this.rowKey] === rowKey) {
data = thisData; data = thisData;
break; break;
} else if (thisData.children && thisData.children.length) { } else if (thisData.children && thisData.children.length) {
data = this.getChildrenCloneDataByRowKey(rowKey, thisData); data = this.getChildrenDataByRowKey(rowKey, thisData);
} }
} }
return data; return data;
}, },
getChildrenCloneDataByRowKey (rowKey, cloneData) { getChildrenDataByRowKey (rowKey, cloneData) {
let data = null; let data = null;
if (cloneData.children && cloneData.children.length) { if (cloneData.children && cloneData.children.length) {
for (let i = 0; i < cloneData.children.length; i++) { for (let i = 0; i < cloneData.children.length; i++) {
@ -785,7 +836,7 @@
data = item; data = item;
break; break;
} else if (item.children && item.children.length) { } else if (item.children && item.children.length) {
data = this.getChildrenCloneDataByRowKey(rowKey, item); data = this.getChildrenDataByRowKey(rowKey, item);
} }
} }
} }