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 21:30:59 +08:00
parent 35ad37642d
commit 642299b9b8
5 changed files with 110 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@
<div :class="classes"> <div :class="classes">
<template v-if="renderType === 'index'">{{naturalIndex + 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">{{checked}}</Checkbox> <Checkbox :checked="checked" @on-change="toggleSelect"></Checkbox>
</template> </template>
<template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template> <template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template>
</div> </div>

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

@ -14,6 +14,16 @@
<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-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> <i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: column._sortType === 'desc'}" @click="handleSort($index, 'desc')"></i>
</span> </span>
<Poptip v-if="column.filters" placement="bottom-end">
<span :class="[prefixCls + '-filter']">
<i class="ivu-icon ivu-icon-chevron-down" @click="handleFilter($index)"></i>
</span>
<div slot="content">
<ul>
<li v-for="item in column.filters"><Checkbox>{{ item.label }}</Checkbox></li>
</ul>
</div>
</Poptip>
</template> </template>
</div> </div>
</th> </th>
@ -23,12 +33,13 @@
</template> </template>
<script> <script>
import Checkbox from '../checkbox/checkbox.vue'; import Checkbox from '../checkbox/checkbox.vue';
import Poptip from '../poptip/poptip.vue';
import Mixin from './mixin'; import Mixin from './mixin';
import { deepCopy } from '../../utils/assist'; import { deepCopy } from '../../utils/assist';
export default { export default {
mixins: [ Mixin ], mixins: [ Mixin ],
components: { Checkbox }, components: { Checkbox, Poptip },
props: { props: {
prefixCls: String, prefixCls: String,
style: Object, style: Object,
@ -74,6 +85,9 @@
type = 'normal'; type = 'normal';
} }
this.$parent.handleSort(index, type); this.$parent.handleSort(index, type);
},
handleFilter (index) {
} }
} }
} }

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

@ -310,24 +310,26 @@
this.cloneColumns.forEach((col) => col._sortType = 'normal'); this.cloneColumns.forEach((col) => col._sortType = 'normal');
const key = this.cloneColumns[index].key; const key = this.cloneColumns[index].key;
if (type === 'asc') { if (this.cloneColumns[index].sortable !== 'custom') { // custom is for remote sort
this.rebuildData.sort((a, b) => { if (type === 'asc') {
if (this.cloneColumns[index].sortMethod) { this.rebuildData.sort((a, b) => {
return this.cloneColumns[index].sortMethod(a, b); if (this.cloneColumns[index].sortMethod) {
} else { return this.cloneColumns[index].sortMethod(a, b);
return a[key] > b[key]; } else {
} return a[key] > b[key];
}); }
} else if (type === 'desc') { });
this.rebuildData.sort((a, b) => { } else if (type === 'desc') {
if (this.cloneColumns[index].sortMethod) { this.rebuildData.sort((a, b) => {
return this.cloneColumns[index].sortMethod(a, b); if (this.cloneColumns[index].sortMethod) {
} else { return this.cloneColumns[index].sortMethod(a, b);
return a[key] < b[key]; } else {
} return a[key] < b[key];
}); }
} else if (type === 'normal') { });
this.rebuildData = this.makeData(); } else if (type === 'normal') {
this.rebuildData = this.makeData();
}
} }
this.cloneColumns[index]._sortType = type; this.cloneColumns[index]._sortType = type;

24
src/styles/components/table.less
View file

@ -10,7 +10,6 @@
border: 1px solid @border-color-base; border: 1px solid @border-color-base;
border-bottom: 0; border-bottom: 0;
border-right: 0; border-right: 0;
//border-collapse: collapse;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
@ -83,7 +82,7 @@
text-align: left; text-align: left;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: middle; vertical-align: middle;
position: relative; //position: relative;
border-bottom: 1px solid @border-color-split; border-bottom: 1px solid @border-color-split;
} }
@ -135,7 +134,7 @@
} }
th &-cell{ th &-cell{
display: inline-block; display: inline-block;
position: relative; //position: relative;
word-wrap: normal; word-wrap: normal;
vertical-align: middle; vertical-align: middle;
} }
@ -219,7 +218,7 @@
} }
&-fixed-header{ &-fixed-header{
overflow: hidden; overflow: hidden;
position: relative; //position: relative;
z-index: 3; z-index: 3;
} }
&-fixed-body{ &-fixed-body{
@ -231,4 +230,21 @@
&-sort{ &-sort{
.sortable(); .sortable();
} }
&-filter{
display: inline-block;
cursor: pointer;
position: relative;
i{
color: @btn-disable-color;
transition: color @transition-time @ease-in-out;
&:hover{
color: inherit;
}
}
}
.ivu-poptip-popper{
min-width: 0;
text-align: left;
}
} }

63
test/routers/table.vue
View file

@ -8,7 +8,8 @@
<!--<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="550" width="450"
:height="height"
stripe stripe
border border
highlight-row highlight-row
@ -38,7 +39,8 @@
columns: [ columns: [
{ {
type: 'selection', type: 'selection',
width: 150 width: 50,
align: 'center'
}, },
{ {
type: 'index', type: 'index',
@ -50,15 +52,54 @@
align: 'left', align: 'left',
fixed: 'left', fixed: 'left',
sortable: true, sortable: true,
width: 100 width: 100,
filters: [
{
label: '家',
value: 'home'
},
{
label: '公司',
value: 'company'
}
],
},
{
title: '标签',
key: 'tag',
width: 100,
filters: [
{
label: '家',
value: 'home'
},
{
label: '公司',
value: 'company'
}
],
render (row) {
const type = `${row.tag}` === 'home' ? 'green' : 'red';
return `<tag color="${type}">${row.tag}</tag>`;
}
}, },
{ {
title: '年龄', title: '年龄',
key: 'age', key: 'age',
align: 'right', align: 'right',
// fixed: 'left', // fixed: 'left',
sortable: true, sortable: 'custom',
width: 100 width: 100,
filters: [
{
label: '家',
value: 'home'
},
{
label: '公司',
value: 'company'
}
],
// render (row) { // render (row) {
// return `<i-button>${row.age}</i-button>` // return `<i-button>${row.age}</i-button>`
// } // }
@ -93,25 +134,29 @@
name: '梁灏', name: '梁灏',
age: 25, age: 25,
address: '北京市朝阳区', address: '北京市朝阳区',
edit: false edit: false,
tag: 'home'
}, },
{ {
name: '段模', name: '段模',
age: 21, age: 21,
address: '北京市海淀区', address: '北京市海淀区',
edit: false edit: false,
tag: 'company'
}, },
{ {
name: '刘天娇', name: '刘天娇',
age: 27, age: 27,
address: '北京市东城区', address: '北京市东城区',
edit: false edit: false,
tag: 'company'
}, },
{ {
name: '胡国伟', name: '胡国伟',
age: 22, age: 22,
address: '北京市西城区', address: '北京市西城区',
edit: false edit: false,
tag: 'home'
} }
], ],
height: 200 height: 200