Table tree hover
This commit is contained in:
parent
1e2341aa5d
commit
837cadab8b
3 changed files with 31 additions and 24 deletions
|
@ -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);
|
||||
|
||||
|
|
|
@ -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
|
||||
}
|
||||
];
|
||||
},
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Reference in a new issue