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 16:53:19 +08:00
parent 731d69a29a
commit 35ad37642d
3 changed files with 77 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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" :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>
<i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: column._sortType === 'asc'}" @click="handleSort($index, 'asc')"></i>
<i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: column._sortType === 'desc'}" @click="handleSort($index, 'desc')"></i>
</span>
</template>
</div>
@ -36,11 +36,6 @@
objData: Object,
fixed: Boolean
},
data () {
return {
sortType: 'normal'
}
},
computed: {
isSelectAll () {
let isSelectAll = true;
@ -74,23 +69,11 @@
const status = !this.isSelectAll;
this.$parent.selectAll(status);
},
handleSortAsc (index) {
if (this.sortType === 'asc') {
this.sortType = 'normal';
this.$parent.handleSort(index, 'normal');
} else {
this.sortType = 'asc';
this.$parent.handleSort(index, 'asc');
}
},
handleSortDesc (index) {
if (this.sortType === 'desc') {
this.sortType = 'normal';
this.$parent.handleSort(index, 'normal');
} else {
this.sortType = 'desc';
this.$parent.handleSort(index, 'desc');
handleSort (index, type) {
if (this.columns[index]._sortType === type) {
type = 'normal';
}
this.$parent.handleSort(index, type);
}
}
}

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

@ -1,5 +1,4 @@
<template>
{{objData|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">
@ -120,12 +119,9 @@
columnsWidth: [],
prefixCls: prefixCls,
compiledUids: [],
objData: this.makeObjData(),
objData: this.makeObjData(), // checkbox or highlight-row
rebuildData: this.makeData(), // for sort or filter
cloneColumns: deepCopy(this.columns),
leftFixedColumns: [],
rightFixedColumns: [],
centerColumns: [],
cloneColumns: this.makeColumns(),
showSlotHeader: true,
showSlotFooter: true,
bodyHeight: 0
@ -175,6 +171,24 @@
let style = {};
if (this.bodyHeight !== 0) style.height = `${this.bodyHeight - 1}px`;
return style;
},
leftFixedColumns () {
let left = [];
this.cloneColumns.forEach((col) => {
if (col.fixed && col.fixed === 'left') {
left.push(col);
}
});
return left;
},
rightFixedColumns () {
let right = [];
this.cloneColumns.forEach((col) => {
if (col.fixed && col.fixed === 'right') {
right.push(col);
}
});
return right;
}
},
methods: {
@ -277,24 +291,6 @@
})
}
},
parseColumns () {
let left = [];
let right = [];
let center = [];
this.cloneColumns.forEach((col) => {
if (col.fixed && col.fixed === 'left') {
left.push(col);
} else if (col.fixed && col.fixed === 'right') {
right.push(col);
} else {
center.push(col);
}
});
this.leftFixedColumns = left;
this.rightFixedColumns = right;
this.centerColumns = center;
this.cloneColumns = left.concat(center).concat(right);
},
handleBodyScroll (event) {
if (this.showHeader) this.$els.header.scrollLeft = event.target.scrollLeft;
if (this.leftFixedColumns.length) this.$els.fixedBody.scrollTop = event.target.scrollTop;
@ -311,15 +307,36 @@
}
},
handleSort (index, type) {
this.cloneColumns.forEach((col) => col._sortType = 'normal');
const key = this.cloneColumns[index].key;
if (type === 'asc') {
this.rebuildData.sort((a, b) => {
return a.age > b.age;
})
if (this.cloneColumns[index].sortMethod) {
return this.cloneColumns[index].sortMethod(a, b);
} else {
return a[key] > b[key];
}
});
} else if (type === 'desc') {
this.rebuildData.sort((a, b) => {
if (this.cloneColumns[index].sortMethod) {
return this.cloneColumns[index].sortMethod(a, b);
} else {
return a[key] < b[key];
}
});
} else if (type === 'normal') {
this.rebuildData = this.makeData();
}
this.cloneColumns[index]._sortType = type;
this.$emit('on-sort-change', {
column: JSON.parse(JSON.stringify(this.columns[this.cloneColumns[index]._index])),
key: key,
order: type
})
},
makeData () {
let data = deepCopy(this.data);
@ -336,10 +353,29 @@
data[index] = newRow;
});
return data;
},
makeColumns () {
let columns = deepCopy(this.columns);
let left = [];
let right = [];
let center = [];
columns.forEach((column, index) => {
column._sortType = 'normal';
column._index = index;
if (column.fixed && column.fixed === 'left') {
left.push(column);
} else if (column.fixed && column.fixed === 'right') {
right.push(column);
} else {
center.push(column);
}
});
return left.concat(center).concat(right);
}
},
compiled () {
this.parseColumns();
this.showSlotHeader = this.$els.title.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
this.showSlotFooter = this.$els.footer.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
},
@ -362,8 +398,7 @@
},
columns: {
handler () {
this.cloneColumns = deepCopy(this.columns);
this.parseColumns();
this.cloneColumns = this.makeColumns();
this.handleResize();
},
deep: true

7
test/routers/table.vue
View file

@ -19,7 +19,8 @@
@on-current-change="current"
@on-select="select"
@on-selection-change="schange"
@on-select-all="sall">
@on-select-all="sall"
@on-sort-change="sortChange">
<!--<div slot="header">表格标题</div>-->
<!--<div slot="footer">表格标题</div>-->
</i-table>
@ -48,6 +49,7 @@
key: 'name',
align: 'left',
fixed: 'left',
sortable: true,
width: 100
},
{
@ -146,6 +148,9 @@
} else {
return '';
}
},
sortChange (data) {
console.log(data)
}
},
ready () {