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

update Table

Browse source 
update Table
This commit is contained in:
梁灏 2016-11-28 15:43:19 +08:00
parent 741b987a33
commit d3dfdb2618
4 changed files with 76 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,10 +6,10 @@
<tbody :class="[prefixCls + '-tbody']"> <tbody :class="[prefixCls + '-tbody']">
<tr <tr
v-for="(index, row) in data" v-for="(index, row) in data"
:class="rowClasses(index, row._index)" :class="rowClasses(row._index)"
@mouseenter.stop="handleMouseIn(index)" @mouseenter.stop="handleMouseIn(row._index)"
@mouseleave.stop="handleMouseOut(index)" @mouseleave.stop="handleMouseOut(row._index)"
@click.stop="highlightCurrentRow(index)"> @click.stop="highlightCurrentRow(row._index)">
<td v-for="column in columns" :class="alignCls(column)"> <td v-for="column in columns" :class="alignCls(column)">
<Cell <Cell
:fixed="fixed" :fixed="fixed"
@ -18,7 +18,7 @@
:column="column" :column="column"
:natural-index="index" :natural-index="index"
:index="row._index" :index="row._index"
:checked="rowChecked(index, row._index)"></Cell> :checked="rowChecked(row._index)"></Cell>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -36,40 +36,37 @@
style: Object, style: Object,
columns: Array, columns: Array,
data: Array, // rebuildData data: Array, // rebuildData
cloneData: Array,
objData: Object, objData: Object,
fixed: Boolean fixed: Boolean
}, },
methods: { methods: {
rowClasses (index, _index) { rowClasses (_index) {
return [ return [
`${this.prefixCls}-row`, `${this.prefixCls}-row`,
this.rowClsName(_index), this.rowClsName(_index),
{ {
[`${this.prefixCls}-row-highlight`]: this.cloneData[index] && this.cloneData[index]._isHighlight, [`${this.prefixCls}-row-highlight`]: this.objData[_index]._isHighlight,
[`${this.prefixCls}-row-hover`]: this.cloneData[index] && this.cloneData[index]._isHover [`${this.prefixCls}-row-hover`]: this.objData[_index]._isHover
} }
] ]
}, },
rowChecked (index, _index) { rowChecked (_index) {
// const data = this.cloneData.filter(row => row._index === _index);
// return data && data._isChecked;
return this.objData[_index]._isChecked; return this.objData[_index]._isChecked;
}, },
setCellWidth (column, index) { setCellWidth (column, index) {
return this.$parent.setCellWidth(column, index); return this.$parent.setCellWidth(column, index);
}, },
rowClsName (index) { rowClsName (_index) {
return this.$parent.rowClassName(this.cloneData[index], index); return this.$parent.rowClassName(this.objData[_index], _index);
}, },
handleMouseIn (index) { handleMouseIn (_index) {
this.$parent.handleMouseIn(index); this.$parent.handleMouseIn(_index);
}, },
handleMouseOut (index) { handleMouseOut (_index) {
this.$parent.handleMouseOut(index); this.$parent.handleMouseOut(_index);
}, },
highlightCurrentRow (index) { highlightCurrentRow (_index) {
this.$parent.highlightCurrentRow(index); this.$parent.highlightCurrentRow(_index);
} }
} }
} }

9
src/components/table/table-head.vue
View file

@ -33,7 +33,7 @@
prefixCls: String, prefixCls: String,
style: Object, style: Object,
columns: Array, columns: Array,
cloneData: Array, objData: Object,
fixed: Boolean fixed: Boolean
}, },
data () { data () {
@ -43,7 +43,12 @@
}, },
computed: { computed: {
isSelectAll () { isSelectAll () {
return !this.cloneData.some(data => !data._isChecked); let isSelectAll = true;
for (let i in this.objData) {
if (!this.objData[i]._isChecked) isSelectAll = false;
}
return isSelectAll;
} }
}, },
methods: { methods: {

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

@ -1,5 +1,5 @@
<template> <template>
{{cloneData|json}} {{objData|json}}
<div :class="classes" :style="styles"> <div :class="classes" :style="styles">
<div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div> <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
<div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel"> <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
@ -7,7 +7,7 @@
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
:style="tableStyle" :style="tableStyle"
:columns="cloneColumns" :columns="cloneColumns"
:clone-data="cloneData"></table-head> :obj-data="objData"></table-head>
</div> </div>
<div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll"> <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
<table-body <table-body
@ -16,8 +16,7 @@
:style="tableStyle" :style="tableStyle"
:columns="cloneColumns" :columns="cloneColumns"
:data="rebuildData" :data="rebuildData"
:obj-data="objData" :obj-data="objData"></table-body>
:clone-data="cloneData"></table-body>
</div> </div>
<div :class="[prefixCls + '-fixed']"> <div :class="[prefixCls + '-fixed']">
<div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
@ -26,7 +25,7 @@
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
:style="fixedTableStyle" :style="fixedTableStyle"
:columns="leftFixedColumns" :columns="leftFixedColumns"
:clone-data="cloneData"></table-head> :obj-data="objData"></table-head>
</div> </div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body> <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
<table-body <table-body
@ -35,8 +34,7 @@
:style="fixedTableStyle" :style="fixedTableStyle"
:columns="leftFixedColumns" :columns="leftFixedColumns"
:data="rebuildData" :data="rebuildData"
:obj-data="objData" :obj-data="objData"></table-body>
:clone-data="cloneData"></table-body>
</div> </div>
</div> </div>
<div :class="[prefixCls + '-fixed-right']"> <div :class="[prefixCls + '-fixed-right']">
@ -46,7 +44,7 @@
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
:style="fixedRightTableStyle" :style="fixedRightTableStyle"
:columns="rightFixedColumns" :columns="rightFixedColumns"
:clone-data="cloneData"></table-head> :obj-data="objData"></table-head>
</div> </div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body> <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
<table-body <table-body
@ -55,8 +53,7 @@
:style="fixedRightTableStyle" :style="fixedRightTableStyle"
:columns="rightFixedColumns" :columns="rightFixedColumns"
:data="rebuildData" :data="rebuildData"
:obj-data="objData" :obj-data="objData"></table-body>
:clone-data="cloneData"></table-body>
</div> </div>
</div> </div>
<div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div> <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
@ -123,7 +120,7 @@
columnsWidth: [], columnsWidth: [],
prefixCls: prefixCls, prefixCls: prefixCls,
compiledUids: [], compiledUids: [],
cloneData: this.makeData(), objData: this.makeObjData(),
rebuildData: this.makeData(), // for sort or filter rebuildData: this.makeData(), // for sort or filter
cloneColumns: deepCopy(this.columns), cloneColumns: deepCopy(this.columns),
leftFixedColumns: [], leftFixedColumns: [],
@ -178,13 +175,6 @@
let style = {}; let style = {};
if (this.bodyHeight !== 0) style.height = `${this.bodyHeight - 1}px`; if (this.bodyHeight !== 0) style.height = `${this.bodyHeight - 1}px`;
return style; return style;
},
objData () {
let objData = {};
this.cloneData.forEach((data) => {
objData[data._index] = data;
});
return objData;
} }
}, },
methods: { methods: {
@ -218,63 +208,47 @@
setCellWidth (column, index) { setCellWidth (column, index) {
return column.width ? column.width : this.columnsWidth[index]; return column.width ? column.width : this.columnsWidth[index];
}, },
assignRow (index, obj) { handleMouseIn (_index) {
return Object.assign({}, this.cloneData[index], obj); if (this.objData[_index]._isHover) return;
this.objData[_index]._isHover = true;
}, },
handleMouseIn (index) { handleMouseOut (_index) {
if (this.cloneData[index]._isHover) return; this.objData[_index]._isHover = false;
const row = this.assignRow(index, {
_isHover: true
});
this.cloneData.$set(index, row);
}, },
handleMouseOut (index) { highlightCurrentRow (_index) {
const row = this.assignRow(index, { if (!this.highlightRow || this.objData[_index]._isHighlight) return;
_isHover: false
});
this.cloneData.$set(index, row);
},
highlightCurrentRow (index) {
if (!this.highlightRow || this.cloneData[index]._isHighlight) return;
let oldIndex = -1; let oldIndex = -1;
this.cloneData.forEach((item, index) => { for (let i in this.objData) {
if (item._isHighlight) { if (this.objData[i]._isHighlight) {
oldIndex = index; oldIndex = parseInt(i);
item._isHighlight = false; this.objData[i]._isHighlight = false;
return true;
} }
}); }
const row = this.assignRow(index, { this.objData[_index]._isHighlight = true;
_isHighlight: true const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.data[oldIndex]));
}); this.$emit('on-current-change', JSON.parse(JSON.stringify(this.data[_index])), oldData);
this.cloneData.$set(index, row);
const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.data[this.rebuildData[oldIndex]._index]));
this.$emit('on-current-change', JSON.parse(JSON.stringify(this.data[this.rebuildData[index]._index])), oldData);
}, },
getSelection () { getSelection () {
let selectionIndexes = []; let selectionIndexes = [];
this.cloneData.forEach((data) => { for (let i in this.objData) {
if (data._isChecked) selectionIndexes.push(data._index); if (this.objData[i]._isChecked) selectionIndexes.push(parseInt(i));
}); }
return JSON.parse(JSON.stringify(this.data.filter((data, index) => selectionIndexes.indexOf(index) > -1))); return JSON.parse(JSON.stringify(this.data.filter((data, index) => selectionIndexes.indexOf(index) > -1)));
}, },
toggleSelect (_index) { // _index toggleSelect (_index) {
let data = {}; let data = {};
let index = -1; let index = -1;
for (let i = 0; i < this.cloneData.length; i++) {
if (this.cloneData[i]._index === _index) { for (let i in this.objData) {
data = this.cloneData[i]; if (parseInt(i) === _index) {
data = this.objData[i];
index = i; index = i;
break;
} }
} }
const status = !data._isChecked; const status = !data._isChecked;
const row = this.assignRow(index, {
_isChecked: status this.objData[_index]._isChecked = status;
});
this.cloneData.$set(index, row);
const selection = this.getSelection(); const selection = this.getSelection();
if (status) { if (status) {
@ -283,11 +257,9 @@
this.$emit('on-selection-change', selection); this.$emit('on-selection-change', selection);
}, },
selectAll (status) { selectAll (status) {
let tmpData = deepCopy(this.cloneData); for (let i in this.objData) {
tmpData.forEach((data) => { this.objData[i]._isChecked = status;
data._isChecked = status; }
});
this.cloneData = tmpData;
const selection = this.getSelection(); const selection = this.getSelection();
if (status) { if (status) {
@ -353,6 +325,17 @@
let data = deepCopy(this.data); let data = deepCopy(this.data);
data.forEach((row, index) => row._index = index); data.forEach((row, index) => row._index = index);
return data; return data;
},
makeObjData () {
let data = {};
this.data.forEach((row, index) => {
const newRow = deepCopy(row);// todo 直接替换
newRow._isHover = false;
newRow._isChecked = false;
newRow._isHighlight = false;
data[index] = newRow;
});
return data;
} }
}, },
compiled () { compiled () {
@ -371,7 +354,7 @@
watch: { watch: {
data: { data: {
handler () { handler () {
this.cloneData = this.makeData(); this.objData = this.makeObjData();
this.rebuildData = this.makeData(); this.rebuildData = this.makeData();
this.handleResize(); this.handleResize();
}, },

8
test/routers/table.vue
View file

@ -127,18 +127,18 @@
this.$Message.info(this.data[index].name); this.$Message.info(this.data[index].name);
}, },
current (newData, oldData) { current (newData, oldData) {
// console.log(newData); console.log(newData);
// console.log(oldData); console.log(oldData);
}, },
select (a,b){ select (a,b){
console.log(JSON.stringify(b)); // console.log(a);
// console.log(b); // console.log(b);
}, },
schange (a) { schange (a) {
// console.log(a) // console.log(a)
}, },
sall (a) { sall (a) {
console.log(a) // console.log(a)
}, },
rowClsName (row, index) { rowClsName (row, index) {
if (index == 1) { if (index == 1) {