update Table
update Table
This commit is contained in:
梁灏
parent
52874e27e5
commit
741b987a33
6 changed files with 100 additions and 38 deletions
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<template v-if="renderType === 'index'">{{index + 1}}</template>
|
||||
<template v-if="renderType === 'index'">{{naturalIndex + 1}}</template>
|
||||
<template v-if="renderType === 'selection'">
|
||||
<Checkbox :checked="checked" @on-change="toggleSelect(index)"></Checkbox>
|
||||
<Checkbox :checked="checked" @on-change="toggleSelect">{{checked}}</Checkbox>
|
||||
</template>
|
||||
<template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template>
|
||||
</div>
|
||||
|
|
@ -16,7 +16,8 @@
|
|||
prefixCls: String,
|
||||
row: Object,
|
||||
column: Object,
|
||||
index: Number,
|
||||
naturalIndex: Number, // index of rebuildData
|
||||
index: Number, // _index of data
|
||||
checked: Boolean,
|
||||
fixed: Boolean
|
||||
},
|
||||
|
|
@ -62,8 +63,8 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
toggleSelect (index) {
|
||||
this.$parent.$parent.toggleSelect(index);
|
||||
toggleSelect () {
|
||||
this.$parent.$parent.toggleSelect(this.index);
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
|
|
@ -84,7 +85,7 @@
|
|||
this.destroy();
|
||||
},
|
||||
watch: {
|
||||
index () {
|
||||
naturalIndex () {
|
||||
this.destroy();
|
||||
this.compile();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
</colgroup>
|
||||
<tbody :class="[prefixCls + '-tbody']">
|
||||
<tr
|
||||
v-for="(index, row) in cloneData"
|
||||
:class="rowClasses(row, index)"
|
||||
v-for="(index, row) in data"
|
||||
:class="rowClasses(index, row._index)"
|
||||
@mouseenter.stop="handleMouseIn(index)"
|
||||
@mouseleave.stop="handleMouseOut(index)"
|
||||
@click.stop="highlightCurrentRow(index)">
|
||||
|
|
@ -16,8 +16,9 @@
|
|||
:prefix-cls="prefixCls"
|
||||
:row="row"
|
||||
:column="column"
|
||||
:index="index"
|
||||
:checked="cloneData[index] && cloneData[index]._isChecked"></Cell>
|
||||
:natural-index="index"
|
||||
:index="row._index"
|
||||
:checked="rowChecked(index, row._index)"></Cell>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -34,20 +35,27 @@
|
|||
prefixCls: String,
|
||||
style: Object,
|
||||
columns: Array,
|
||||
data: Array, // rebuildData
|
||||
cloneData: Array,
|
||||
objData: Object,
|
||||
fixed: Boolean
|
||||
},
|
||||
methods: {
|
||||
rowClasses (row, index) {
|
||||
rowClasses (index, _index) {
|
||||
return [
|
||||
`${this.prefixCls}-row`,
|
||||
this.rowClsName(index),
|
||||
this.rowClsName(_index),
|
||||
{
|
||||
[`${this.prefixCls}-row-highlight`]: this.cloneData[index] && this.cloneData[index]._isHighlight,
|
||||
[`${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) {
|
||||
return this.$parent.setCellWidth(column, index);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
<template v-else>
|
||||
{{{ renderHeader(column, $index) }}}
|
||||
<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-down-b" @click="handleSortDesc($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" :class="{on: sortType === 'desc'}" @click="handleSortDesc($index)"></i>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -36,6 +36,11 @@
|
|||
cloneData: Array,
|
||||
fixed: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
sortType: 'normal'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isSelectAll () {
|
||||
return !this.cloneData.some(data => !data._isChecked);
|
||||
|
|
@ -65,10 +70,22 @@
|
|||
this.$parent.selectAll(status);
|
||||
},
|
||||
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) {
|
||||
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');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
{{cloneData|json}}
|
||||
<div :class="classes" :style="styles">
|
||||
<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">
|
||||
|
|
@ -14,6 +15,8 @@
|
|||
:prefix-cls="prefixCls"
|
||||
:style="tableStyle"
|
||||
:columns="cloneColumns"
|
||||
:data="rebuildData"
|
||||
:obj-data="objData"
|
||||
:clone-data="cloneData"></table-body>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-fixed']">
|
||||
|
|
@ -31,6 +34,8 @@
|
|||
:prefix-cls="prefixCls"
|
||||
:style="fixedTableStyle"
|
||||
:columns="leftFixedColumns"
|
||||
:data="rebuildData"
|
||||
:obj-data="objData"
|
||||
:clone-data="cloneData"></table-body>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -49,6 +54,8 @@
|
|||
:prefix-cls="prefixCls"
|
||||
:style="fixedRightTableStyle"
|
||||
:columns="rightFixedColumns"
|
||||
:data="rebuildData"
|
||||
:obj-data="objData"
|
||||
:clone-data="cloneData"></table-body>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -116,7 +123,8 @@
|
|||
columnsWidth: [],
|
||||
prefixCls: prefixCls,
|
||||
compiledUids: [],
|
||||
cloneData: deepCopy(this.data),
|
||||
cloneData: this.makeData(),
|
||||
rebuildData: this.makeData(), // for sort or filter
|
||||
cloneColumns: deepCopy(this.columns),
|
||||
leftFixedColumns: [],
|
||||
rightFixedColumns: [],
|
||||
|
|
@ -170,6 +178,13 @@
|
|||
let style = {};
|
||||
if (this.bodyHeight !== 0) style.height = `${this.bodyHeight - 1}px`;
|
||||
return style;
|
||||
},
|
||||
objData () {
|
||||
let objData = {};
|
||||
this.cloneData.forEach((data) => {
|
||||
objData[data._index] = data;
|
||||
});
|
||||
return objData;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -235,19 +250,27 @@
|
|||
});
|
||||
this.cloneData.$set(index, row);
|
||||
|
||||
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);
|
||||
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 () {
|
||||
let selectionIndexes = [];
|
||||
this.cloneData.forEach((data, index) => {
|
||||
if (data._isChecked) selectionIndexes.push(index);
|
||||
this.cloneData.forEach((data) => {
|
||||
if (data._isChecked) selectionIndexes.push(data._index);
|
||||
});
|
||||
|
||||
return JSON.parse(JSON.stringify(this.data.filter((data, index) => selectionIndexes.indexOf(index) > -1)));
|
||||
},
|
||||
toggleSelect (index) {
|
||||
const status = !this.cloneData[index]._isChecked;
|
||||
toggleSelect (_index) { // _index
|
||||
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, {
|
||||
_isChecked: status
|
||||
});
|
||||
|
|
@ -255,7 +278,7 @@
|
|||
|
||||
const selection = this.getSelection();
|
||||
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);
|
||||
},
|
||||
|
|
@ -317,10 +340,19 @@
|
|||
},
|
||||
handleSort (index, type) {
|
||||
if (type === 'asc') {
|
||||
|
||||
this.rebuildData.sort((a, b) => {
|
||||
return a.age > b.age;
|
||||
})
|
||||
} 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 () {
|
||||
|
|
@ -339,7 +371,8 @@
|
|||
watch: {
|
||||
data: {
|
||||
handler () {
|
||||
this.cloneData = deepCopy(this.data);
|
||||
this.cloneData = this.makeData();
|
||||
this.rebuildData = this.makeData();
|
||||
this.handleResize();
|
||||
},
|
||||
deep: true
|
||||
|
|
|
|||
|
|
@ -23,6 +23,10 @@
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
&.on{
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&:first-child{
|
||||
top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,7 @@
|
|||
<!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
|
||||
<br>
|
||||
<i-table
|
||||
width="450"
|
||||
:height="height"
|
||||
width="550"
|
||||
stripe
|
||||
border
|
||||
highlight-row
|
||||
|
|
@ -38,7 +37,7 @@
|
|||
columns: [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 50
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
type: 'index',
|
||||
|
|
@ -96,7 +95,7 @@
|
|||
},
|
||||
{
|
||||
name: '段模',
|
||||
age: 26,
|
||||
age: 21,
|
||||
address: '北京市海淀区',
|
||||
edit: false
|
||||
},
|
||||
|
|
@ -108,7 +107,7 @@
|
|||
},
|
||||
{
|
||||
name: '胡国伟',
|
||||
age: 28,
|
||||
age: 22,
|
||||
address: '北京市西城区',
|
||||
edit: false
|
||||
}
|
||||
|
|
@ -128,15 +127,15 @@
|
|||
this.$Message.info(this.data[index].name);
|
||||
},
|
||||
current (newData, oldData) {
|
||||
console.log(newData);
|
||||
console.log(oldData);
|
||||
// console.log(newData);
|
||||
// console.log(oldData);
|
||||
},
|
||||
select (a,b){
|
||||
console.log(a);
|
||||
console.log(b);
|
||||
console.log(JSON.stringify(b));
|
||||
// console.log(b);
|
||||
},
|
||||
schange (a) {
|
||||
console.log(a)
|
||||
// console.log(a)
|
||||
},
|
||||
sall (a) {
|
||||
console.log(a)
|
||||
|
|
@ -161,7 +160,7 @@
|
|||
// address: '北京市东城区2',
|
||||
// edit: false
|
||||
// });
|
||||
// this.data.splice(1, 1)
|
||||
// this.data.splice(0, 1)
|
||||
// this.columns.splice(2,1)
|
||||
}, 2000);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue