Table tree hover

This commit is contained in:
梁灏 2020-01-06 11:54:55 +08:00
parent 1e2341aa5d
commit 837cadab8b
3 changed files with 31 additions and 24 deletions

View file

@ -95,20 +95,20 @@
rowExpanded (_index) {
return this.objData[_index] && this.objData[_index]._isExpanded;
},
handleMouseIn (_index, event) {
handleMouseIn (_index, event, rowKey) {
event.stopPropagation();
this.$parent.handleMouseIn(_index);
this.$parent.handleMouseIn(_index, rowKey);
},
handleMouseOut (_index, event) {
handleMouseOut (_index, event, rowKey) {
event.stopPropagation();
this.$parent.handleMouseOut(_index);
this.$parent.handleMouseOut(_index, rowKey);
},
clickCurrentRow (_index) {
this.$parent.clickCurrentRow(_index);
clickCurrentRow (_index, rowKey) {
this.$parent.clickCurrentRow(_index, rowKey);
},
dblclickCurrentRow (_index, event) {
dblclickCurrentRow (_index, event, rowKey) {
event.stopPropagation();
this.$parent.dblclickCurrentRow(_index);
this.$parent.dblclickCurrentRow(_index, rowKey);
},
getSpan (row, column, rowIndex, columnIndex) {
const fn = this.$parent.spanMethod;
@ -207,15 +207,16 @@
props: {
draggable: false,
row: row,
'prefix-cls': this.prefixCls
'prefix-cls': this.prefixCls,
isChildren: true
},
style: trStyle,
key: this.rowKey ? row._rowKey : index,
nativeOn: {
mouseenter: (e) => this.handleMouseIn(row._index, e),
mouseleave: (e) => this.handleMouseOut(row._index, e),
click: (e) => this.clickCurrentRow(row._index, e),
dblclick: (e) => this.dblclickCurrentRow(row._index, e)
mouseenter: (e) => this.handleMouseIn(row._index, e, row._rowKey),
mouseleave: (e) => this.handleMouseOut(row._index, e, row._rowKey),
click: (e) => this.clickCurrentRow(row._index, e, row._rowKey),
dblclick: (e) => this.dblclickCurrentRow(row._index, e, row._rowKey)
}
}, $tds);

View file

@ -7,7 +7,8 @@
props: {
row: Object,
prefixCls: String,
draggable: Boolean
draggable: Boolean,
isChildren: Boolean // rowKey
},
computed: {
objData () {
@ -27,12 +28,13 @@
e.preventDefault();
},
rowClasses (_index) {
const objData = this.isChildren ? this.$parent.$parent.getDataByRowKey(this.row._rowKey) : this.objData[_index];
return [
`${this.prefixCls}-row`,
this.rowClsName(_index),
{
[`${this.prefixCls}-row-highlight`]: this.objData[_index] && this.objData[_index]._isHighlight,
[`${this.prefixCls}-row-hover`]: this.objData[_index] && this.objData[_index]._isHover
[`${this.prefixCls}-row-highlight`]: objData && objData._isHighlight,
[`${this.prefixCls}-row-hover`]: objData && objData._isHover
}
];
},

View file

@ -614,14 +614,16 @@
this.columnsWidth = columnsWidth;
this.fixedHeader();
},
handleMouseIn (_index) {
handleMouseIn (_index, rowKey) {
if (this.disabledHover) return;
if (this.objData[_index]._isHover) return;
this.objData[_index]._isHover = true;
const objData = rowKey ? this.getDataByRowKey(rowKey) : this.objData[_index];
if (objData._isHover) return;
objData._isHover = true;
},
handleMouseOut (_index) {
handleMouseOut (_index, rowKey) {
if (this.disabledHover) return;
this.objData[_index]._isHover = false;
const objData = rowKey ? this.getDataByRowKey(rowKey) : this.objData[_index];
objData._isHover = false;
},
// highlightCurrentRow clearCurrentRow
handleCurrentRow (type, _index) {
@ -714,13 +716,15 @@
getChildrenByRowKey (rowKey, objData) {
let data = null;
if (objData.children && objData.children.length) {
objData.children.forEach(item => {
for (let i = 0; i < objData.children.length; i++) {
const item = objData.children[i];
if (item._rowKey === rowKey) {
data = item;
break;
} else if (item.children && item.children.length) {
data = this.getChildrenByRowKey(rowKey, item);
}
});
}
}
return data;
},
@ -1011,10 +1015,10 @@
},
makeObjBaseData (row) {
const newRow = deepCopy(row);
newRow._isHover = false;
if ((typeof this.rowKey) === 'string') {
newRow._rowKey = newRow[this.rowKey];
}
newRow._isHover = false;
if (newRow._disabled) {
newRow._isDisabled = newRow._disabled;
} else {