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

Table tree support highlight-row

Browse source
This commit is contained in:
梁灏 2020-01-06 16:14:09 +08:00
parent 837cadab8b
commit cd68d23fdb
3 changed files with 77 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
examples/routers/table.vue
View file

@ -1,10 +1,11 @@
<template>
<div style="margin: 100px;">
<Table border ref="selection" :columns="columns4" :data="data1" row-key="id">
<Table border highlight-row @on-current-change="occ" ref="selection" :columns="columns4" :data="data1" row-key="id">
<template slot-scope="{ row }" slot="age">
<strong>{{row.age}}</strong>
</template>
</Table>
<br><br>
<Button @click="handleSelectAll(true)">Set all selected</Button>
<Button @click="handleSelectAll(false)">Cancel all selected</Button>
</div>
@ -14,6 +15,11 @@
data () {
return {
columns4: [
// {
// type: 'index',
// width: 60,
// align: 'center'
// },
{
type: 'selection',
width: 60,
@ -131,6 +137,10 @@
methods: {
handleSelectAll (status) {
this.$refs.selection.selectAll(status);
},
occ (n, o) {
console.log(n);
console.log(o);
}
}
}

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

@ -103,7 +103,7 @@
event.stopPropagation();
this.$parent.handleMouseOut(_index, rowKey);
},
clickCurrentRow (_index, rowKey) {
clickCurrentRow (_index, event, rowKey) {
this.$parent.clickCurrentRow(_index, rowKey);
},
dblclickCurrentRow (_index, event, rowKey) {

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

@ -626,29 +626,57 @@
objData._isHover = false;
},
// 通用处理 highlightCurrentRow 和 clearCurrentRow
handleCurrentRow (type, _index) {
handleCurrentRow (type, _index, rowKey) {
const objData = rowKey ? this.getDataByRowKey(rowKey) : this.objData[_index];
let oldData = null;
let oldIndex = -1;
for (let i in this.objData) {
if (this.objData[i]._isHighlight) {
oldIndex = parseInt(i);
this.objData[i]._isHighlight = false;
break;
} else if (this.objData[i].children && this.objData[i].children.length) {
const resetData = this.handleResetChildrenRow(this.objData[i]);
if (resetData) oldData = JSON.parse(JSON.stringify(resetData));
}
}
if (type === 'highlight') this.objData[_index]._isHighlight = true;
const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.cloneData[oldIndex]));
const newData = type === 'highlight' ? JSON.parse(JSON.stringify(this.cloneData[_index])) : null;
if (type === 'highlight') objData._isHighlight = true;
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;
this.$emit('on-current-change', newData, oldData);
},
highlightCurrentRow (_index) {
if (!this.highlightRow || this.objData[_index]._isHighlight) return;
this.handleCurrentRow('highlight', _index);
handleResetChildrenRow (objData) {
let data = null;
if (objData.children && objData.children.length) {
for (let i = 0; i < objData.children.length; i++) {
const item = objData.children[i];
if (item._isHighlight) {
item._isHighlight = false;
data = item;
break;
} else if (item.children && item.children.length) {
data = this.handleResetChildrenRow(item);
}
}
}
return data;
},
highlightCurrentRow (_index, rowKey) {
const objData = rowKey ? this.getDataByRowKey(rowKey) : this.objData[_index];
if (!this.highlightRow || objData._isHighlight) return;
this.handleCurrentRow('highlight', _index, rowKey);
},
clearCurrentRow () {
if (!this.highlightRow) return;
this.handleCurrentRow('clear');
},
clickCurrentRow (_index) {
this.highlightCurrentRow (_index);
clickCurrentRow (_index, rowKey) {
this.highlightCurrentRow (_index, rowKey);
// todo
this.$emit('on-row-click', JSON.parse(JSON.stringify(this.cloneData[_index])), _index);
},
dblclickCurrentRow (_index) {
@ -728,6 +756,34 @@
}
return data;
},
getCloneDataByRowKey (rowKey) {
let data = null;
for (let i = 0; i < this.cloneData.length; i++) {
const thisData = this.cloneData[i];
if (thisData[this.rowKey] === rowKey) {
data = thisData;
break;
} else if (thisData.children && thisData.children.length) {
data = this.getChildrenCloneDataByRowKey(rowKey, thisData);
}
}
return data;
},
getChildrenCloneDataByRowKey (rowKey, cloneData) {
let data = null;
if (cloneData.children && cloneData.children.length) {
for (let i = 0; i < cloneData.children.length; i++) {
const item = cloneData.children[i];
if (item[this.rowKey] === rowKey) {
data = item;
break;
} else if (item.children && item.children.length) {
data = this.getChildrenCloneDataByRowKey(rowKey, item);
}
}
}
return data;
},
selectAll (status) {
// this.rebuildData.forEach((data) => {
// if(this.objData[data._index]._isDisabled){