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 14:23:49 +08:00
parent 52874e27e5
commit 741b987a33
6 changed files with 100 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/table/cell.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div :class="classes"> <div :class="classes">
<template v-if="renderType === 'index'">{{index + 1}}</template> <template v-if="renderType === 'index'">{{naturalIndex + 1}}</template>
<template v-if="renderType === 'selection'"> <template v-if="renderType === 'selection'">
<Checkbox :checked="checked" @on-change="toggleSelect(index)"></Checkbox> <Checkbox :checked="checked" @on-change="toggleSelect">{{checked}}</Checkbox>
</template> </template>
<template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template> <template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template>
</div> </div>
@ -16,7 +16,8 @@
prefixCls: String, prefixCls: String,
row: Object, row: Object,
column: Object, column: Object,
index: Number, naturalIndex: Number, // index of rebuildData
index: Number, // _index of data
checked: Boolean, checked: Boolean,
fixed: Boolean fixed: Boolean
}, },
@ -62,8 +63,8 @@
} }
} }
}, },
toggleSelect (index) { toggleSelect () {
this.$parent.$parent.toggleSelect(index); this.$parent.$parent.toggleSelect(this.index);
} }
}, },
compiled () { compiled () {
@ -84,7 +85,7 @@
this.destroy(); this.destroy();
}, },
watch: { watch: {
index () { naturalIndex () {
this.destroy(); this.destroy();
this.compile(); this.compile();
} }

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

@ -5,8 +5,8 @@
</colgroup> </colgroup>
<tbody :class="[prefixCls + '-tbody']"> <tbody :class="[prefixCls + '-tbody']">
<tr <tr
v-for="(index, row) in cloneData" v-for="(index, row) in data"
:class="rowClasses(row, index)" :class="rowClasses(index, row._index)"
@mouseenter.stop="handleMouseIn(index)" @mouseenter.stop="handleMouseIn(index)"
@mouseleave.stop="handleMouseOut(index)" @mouseleave.stop="handleMouseOut(index)"
@click.stop="highlightCurrentRow(index)"> @click.stop="highlightCurrentRow(index)">
@ -16,8 +16,9 @@
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
:row="row" :row="row"
:column="column" :column="column"
:index="index" :natural-index="index"
:checked="cloneData[index] && cloneData[index]._isChecked"></Cell> :index="row._index"
:checked="rowChecked(index, row._index)"></Cell>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -34,20 +35,27 @@
prefixCls: String, prefixCls: String,
style: Object, style: Object,
columns: Array, columns: Array,
data: Array, // rebuildData
cloneData: Array, cloneData: Array,
objData: Object,
fixed: Boolean fixed: Boolean
}, },
methods: { methods: {
rowClasses (row, index) { rowClasses (index, _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.cloneData[index] && this.cloneData[index]._isHighlight,
[`${this.prefixCls}-row-hover`]: this.cloneData[index] && this.cloneData[index]._isHover [`${this.prefixCls}-row-hover`]: this.cloneData[index] && this.cloneData[index]._isHover
} }
] ]
}, },
rowChecked (index, _index) {
// const data = this.cloneData.filter(row => row._index === _index);
// return data && data._isChecked;
return this.objData[_index]._isChecked;
},
setCellWidth (column, index) { setCellWidth (column, index) {
return this.$parent.setCellWidth(column, index); return this.$parent.setCellWidth(column, index);
}, },

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

@ -11,8 +11,8 @@
<template v-else> <template v-else>
{{{ renderHeader(column, $index) }}} {{{ renderHeader(column, $index) }}}
<span :class="[prefixCls + '-sort']" v-if="column.sortable"> <span :class="[prefixCls + '-sort']" v-if="column.sortable">
<i class="ivu-icon ivu-icon-arrow-up-b" @click="handleSortAsc($index)"></i> <i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: sortType === 'asc'}" @click="handleSortAsc($index)"></i>
<i class="ivu-icon ivu-icon-arrow-down-b" @click="handleSortDesc($index)"></i> <i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: sortType === 'desc'}" @click="handleSortDesc($index)"></i>
</span> </span>
</template> </template>
</div> </div>
@ -36,6 +36,11 @@
cloneData: Array, cloneData: Array,
fixed: Boolean fixed: Boolean
}, },
data () {
return {
sortType: 'normal'
}
},
computed: { computed: {
isSelectAll () { isSelectAll () {
return !this.cloneData.some(data => !data._isChecked); return !this.cloneData.some(data => !data._isChecked);
@ -65,10 +70,22 @@
this.$parent.selectAll(status); this.$parent.selectAll(status);
}, },
handleSortAsc (index) { handleSortAsc (index) {
this.$parent.handleSort(index, 'asc'); if (this.sortType === 'asc') {
this.sortType = 'normal';
this.$parent.handleSort(index, 'normal');
} else {
this.sortType = 'asc';
this.$parent.handleSort(index, 'asc');
}
}, },
handleSortDesc (index) { handleSortDesc (index) {
this.$parent.handleSort(index, 'desc'); if (this.sortType === 'desc') {
this.sortType = 'normal';
this.$parent.handleSort(index, 'normal');
} else {
this.sortType = 'desc';
this.$parent.handleSort(index, 'desc');
}
} }
} }
} }

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

@ -1,4 +1,5 @@
<template> <template>
{{cloneData|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">
@ -14,6 +15,8 @@
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
:style="tableStyle" :style="tableStyle"
:columns="cloneColumns" :columns="cloneColumns"
:data="rebuildData"
:obj-data="objData"
:clone-data="cloneData"></table-body> :clone-data="cloneData"></table-body>
</div> </div>
<div :class="[prefixCls + '-fixed']"> <div :class="[prefixCls + '-fixed']">
@ -31,6 +34,8 @@
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
:style="fixedTableStyle" :style="fixedTableStyle"
:columns="leftFixedColumns" :columns="leftFixedColumns"
:data="rebuildData"
:obj-data="objData"
:clone-data="cloneData"></table-body> :clone-data="cloneData"></table-body>
</div> </div>
</div> </div>
@ -49,6 +54,8 @@
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
:style="fixedRightTableStyle" :style="fixedRightTableStyle"
:columns="rightFixedColumns" :columns="rightFixedColumns"
:data="rebuildData"
:obj-data="objData"
:clone-data="cloneData"></table-body> :clone-data="cloneData"></table-body>
</div> </div>
</div> </div>
@ -116,7 +123,8 @@
columnsWidth: [], columnsWidth: [],
prefixCls: prefixCls, prefixCls: prefixCls,
compiledUids: [], compiledUids: [],
cloneData: deepCopy(this.data), cloneData: this.makeData(),
rebuildData: this.makeData(), // for sort or filter
cloneColumns: deepCopy(this.columns), cloneColumns: deepCopy(this.columns),
leftFixedColumns: [], leftFixedColumns: [],
rightFixedColumns: [], rightFixedColumns: [],
@ -170,6 +178,13 @@
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: {
@ -235,19 +250,27 @@
}); });
this.cloneData.$set(index, row); this.cloneData.$set(index, row);
const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.data[oldIndex])); 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[index])), oldData); 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, index) => { this.cloneData.forEach((data) => {
if (data._isChecked) selectionIndexes.push(index); if (data._isChecked) selectionIndexes.push(data._index);
}); });
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) { toggleSelect (_index) { // _index
const status = !this.cloneData[index]._isChecked; let data = {};
let index = -1;
for (let i = 0; i < this.cloneData.length; i++) {
if (this.cloneData[i]._index === _index) {
data = this.cloneData[i];
index = i;
break;
}
}
const status = !data._isChecked;
const row = this.assignRow(index, { const row = this.assignRow(index, {
_isChecked: status _isChecked: status
}); });
@ -255,7 +278,7 @@
const selection = this.getSelection(); const selection = this.getSelection();
if (status) { if (status) {
this.$emit('on-select', selection, JSON.parse(JSON.stringify(this.data[index]))); this.$emit('on-select', selection, JSON.parse(JSON.stringify(this.data[_index])));
} }
this.$emit('on-selection-change', selection); this.$emit('on-selection-change', selection);
}, },
@ -317,10 +340,19 @@
}, },
handleSort (index, type) { handleSort (index, type) {
if (type === 'asc') { if (type === 'asc') {
this.rebuildData.sort((a, b) => {
return a.age > b.age;
})
} else if (type === 'desc') { } else if (type === 'desc') {
} else if (type === 'normal') {
this.rebuildData = this.makeData();
} }
},
makeData () {
let data = deepCopy(this.data);
data.forEach((row, index) => row._index = index);
return data;
} }
}, },
compiled () { compiled () {
@ -339,7 +371,8 @@
watch: { watch: {
data: { data: {
handler () { handler () {
this.cloneData = deepCopy(this.data); this.cloneData = this.makeData();
this.rebuildData = this.makeData();
this.handleResize(); this.handleResize();
}, },
deep: true deep: true

4
src/styles/mixins/caret.less
View file

@ -23,6 +23,10 @@
color: inherit; color: inherit;
} }
&.on{
color: @primary-color;
}
&:first-child{ &:first-child{
top: 0; top: 0;
} }

21
test/routers/table.vue
View file

@ -8,8 +8,7 @@
<!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>--> <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
<br> <br>
<i-table <i-table
width="450" width="550"
:height="height"
stripe stripe
border border
highlight-row highlight-row
@ -38,7 +37,7 @@
columns: [ columns: [
{ {
type: 'selection', type: 'selection',
width: 50 width: 150
}, },
{ {
type: 'index', type: 'index',
@ -96,7 +95,7 @@
}, },
{ {
name: '段模', name: '段模',
age: 26, age: 21,
address: '北京市海淀区', address: '北京市海淀区',
edit: false edit: false
}, },
@ -108,7 +107,7 @@
}, },
{ {
name: '胡国伟', name: '胡国伟',
age: 28, age: 22,
address: '北京市西城区', address: '北京市西城区',
edit: false edit: false
} }
@ -128,15 +127,15 @@
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(a); console.log(JSON.stringify(b));
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)
@ -161,7 +160,7 @@
// address: '北京市东城区2', // address: '北京市东城区2',
// edit: false // edit: false
// }); // });
// this.data.splice(1, 1) // this.data.splice(0, 1)
// this.columns.splice(2,1) // this.columns.splice(2,1)
}, 2000); }, 2000);
} }