drip-public/iview
5
0
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-29 13:25:25 +08:00
parent adaeca88ba
commit 45e7ed7ef5
4 changed files with 111 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +5,7 @@
</colgroup>
<thead>
<tr>
<th v-for="column in columns" :class="alignCls(column)">
<th v-for="(index, column) in columns" :class="alignCls(column)">
<div :class="cellClasses(column)">
<template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
<template v-else>
@ -35,8 +35,13 @@
</div>
<div slot="content" :class="[prefixCls + '-filter-list']" v-else>
<ul>
<li :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: !column._filterChecked.lengtg}]">全部</li>
<li :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: column._filterChecked[0] === item.value}]" v-for="item in column.filters">{{ item.label }}</li>
<li
:class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: !column._filterChecked.length}]"
@click="handleReset($index)">全部</li>
<li
:class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: column._filterChecked[0] === item.value}]"
v-for="item in column.filters"
@click="handleSelect(index, item.value)">{{ item.label }}</li>
</ul>
</div>
</Poptip>
@ -107,6 +112,9 @@
handleFilter (index) {
this.$parent.handleFilter(index);
},
handleSelect (index, value) {
this.$parent.handleFilterSelect(index, value);
},
handleReset (index) {
this.$parent.handleFilterReset(index);
},

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

@ -1,61 +1,63 @@
<template>
<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">
<table-head
:prefix-cls="prefixCls"
:style="tableStyle"
:columns="cloneColumns"
:obj-data="objData"></table-head>
</div>
<div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
<table-body
v-ref:tbody
:prefix-cls="prefixCls"
:style="tableStyle"
:columns="cloneColumns"
:data="rebuildData"
:obj-data="objData"></table-body>
</div>
<div :class="[prefixCls + '-fixed']">
<div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
<div :class="wrapClasses" :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 + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
<table-head
fixed
:prefix-cls="prefixCls"
:style="fixedTableStyle"
:columns="leftFixedColumns"
:obj-data="objData"></table-head>
:prefix-cls="prefixCls"
:style="tableStyle"
:columns="cloneColumns"
:obj-data="objData"></table-head>
</div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
<div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
<table-body
fixed
:prefix-cls="prefixCls"
:style="fixedTableStyle"
:columns="leftFixedColumns"
:data="rebuildData"
:obj-data="objData"></table-body>
v-ref:tbody
:prefix-cls="prefixCls"
:style="tableStyle"
:columns="cloneColumns"
:data="rebuildData"
:obj-data="objData"></table-body>
</div>
<div :class="[prefixCls + '-fixed']">
<div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
<table-head
fixed
:prefix-cls="prefixCls"
:style="fixedTableStyle"
:columns="leftFixedColumns"
:obj-data="objData"></table-head>
</div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
<table-body
fixed
:prefix-cls="prefixCls"
:style="fixedTableStyle"
:columns="leftFixedColumns"
:data="rebuildData"
:obj-data="objData"></table-body>
</div>
</div>
<div :class="[prefixCls + '-fixed-right']">
<div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
<table-head
fixed
:prefix-cls="prefixCls"
:style="fixedRightTableStyle"
:columns="rightFixedColumns"
:obj-data="objData"></table-head>
</div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
<table-body
fixed
:prefix-cls="prefixCls"
:style="fixedRightTableStyle"
:columns="rightFixedColumns"
:data="rebuildData"
:obj-data="objData"></table-body>
</div>
</div>
<div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
</div>
<div :class="[prefixCls + '-fixed-right']">
<div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
<table-head
fixed
:prefix-cls="prefixCls"
:style="fixedRightTableStyle"
:columns="rightFixedColumns"
:obj-data="objData"></table-head>
</div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
<table-body
fixed
:prefix-cls="prefixCls"
:style="fixedRightTableStyle"
:columns="rightFixedColumns"
:data="rebuildData"
:obj-data="objData"></table-body>
</div>
</div>
<div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
</div>
</template>
<script>
@ -129,11 +131,18 @@
}
},
computed: {
wrapClasses () {
return [
`${prefixCls}-wrapper`,
{
[`${prefixCls}-hide`]: !this.ready
}
]
},
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-hide`]: !this.ready,
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-border`]: this.border,
[`${prefixCls}-stripe`]: this.stripe,
@ -364,8 +373,15 @@
this.cloneColumns[index]._isFiltered = true;
this.cloneColumns[index]._filterVisible = false;
},
handleFilterSelect (index, value) {
this.cloneColumns[index]._filterChecked = [value];
this.handleFilter(index);
},
handleFilterReset (index) {
this.cloneColumns[index]._isFiltered = false;
this.cloneColumns[index]._filterVisible = false;
this.cloneColumns[index]._filterChecked = [];
this.rebuildData = this.makeData();
},
makeData () {
let data = deepCopy(this.data);