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

Table tree hover

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

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

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

8
src/components/table/table-tr.vue
View file

@ -7,7 +7,8 @@
props: { props: {
row: Object, row: Object,
prefixCls: String, prefixCls: String,
draggable: Boolean draggable: Boolean,
isChildren: Boolean // 开启后，会认为是子节点，相关逻辑通过 rowKey 查找
}, },
computed: { computed: {
objData () { objData () {
@ -27,12 +28,13 @@
e.preventDefault(); e.preventDefault();
}, },
rowClasses (_index) { rowClasses (_index) {
const objData = this.isChildren ? this.$parent.$parent.getDataByRowKey(this.row._rowKey) : this.objData[_index];
return [ return [
`${this.prefixCls}-row`, `${this.prefixCls}-row`,
this.rowClsName(_index), this.rowClsName(_index),
{ {
[`${this.prefixCls}-row-highlight`]: this.objData[_index] && this.objData[_index]._isHighlight, [`${this.prefixCls}-row-highlight`]: objData && objData._isHighlight,
[`${this.prefixCls}-row-hover`]: this.objData[_index] && this.objData[_index]._isHover [`${this.prefixCls}-row-hover`]: objData && objData._isHover
} }
]; ];
}, },

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

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