update Table
update Table
This commit is contained in:
梁灏
parent
35ad37642d
commit
642299b9b8
5 changed files with 110 additions and 33 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<div :class="classes">
|
||||
<template v-if="renderType === 'index'">{{naturalIndex + 1}}</template>
|
||||
<template v-if="renderType === 'selection'">
|
||||
<Checkbox :checked="checked" @on-change="toggleSelect">{{checked}}</Checkbox>
|
||||
<Checkbox :checked="checked" @on-change="toggleSelect"></Checkbox>
|
||||
</template>
|
||||
<template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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-down-b" :class="{on: column._sortType === 'desc'}" @click="handleSort($index, 'desc')"></i>
|
||||
</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>
|
||||
</div>
|
||||
</th>
|
||||
|
|
@ -23,12 +33,13 @@
|
|||
</template>
|
||||
<script>
|
||||
import Checkbox from '../checkbox/checkbox.vue';
|
||||
import Poptip from '../poptip/poptip.vue';
|
||||
import Mixin from './mixin';
|
||||
import { deepCopy } from '../../utils/assist';
|
||||
|
||||
export default {
|
||||
mixins: [ Mixin ],
|
||||
components: { Checkbox },
|
||||
components: { Checkbox, Poptip },
|
||||
props: {
|
||||
prefixCls: String,
|
||||
style: Object,
|
||||
|
|
@ -74,6 +85,9 @@
|
|||
type = 'normal';
|
||||
}
|
||||
this.$parent.handleSort(index, type);
|
||||
},
|
||||
handleFilter (index) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -310,24 +310,26 @@
|
|||
this.cloneColumns.forEach((col) => col._sortType = 'normal');
|
||||
|
||||
const key = this.cloneColumns[index].key;
|
||||
if (type === 'asc') {
|
||||
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 === '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();
|
||||
if (this.cloneColumns[index].sortable !== 'custom') { // custom is for remote sort
|
||||
if (type === 'asc') {
|
||||
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 === '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;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
border: 1px solid @border-color-base;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
//border-collapse: collapse;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -83,7 +82,7 @@
|
|||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
//position: relative;
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
}
|
||||
|
||||
|
|
@ -135,7 +134,7 @@
|
|||
}
|
||||
th &-cell{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
//position: relative;
|
||||
word-wrap: normal;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -219,7 +218,7 @@
|
|||
}
|
||||
&-fixed-header{
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
//position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
&-fixed-body{
|
||||
|
|
@ -231,4 +230,21 @@
|
|||
&-sort{
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,8 @@
|
|||
<!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
|
||||
<br>
|
||||
<i-table
|
||||
width="550"
|
||||
width="450"
|
||||
:height="height"
|
||||
stripe
|
||||
border
|
||||
highlight-row
|
||||
|
|
@ -38,7 +39,8 @@
|
|||
columns: [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 150
|
||||
width: 50,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
type: 'index',
|
||||
|
|
@ -50,15 +52,54 @@
|
|||
align: 'left',
|
||||
fixed: 'left',
|
||||
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: '年龄',
|
||||
key: 'age',
|
||||
align: 'right',
|
||||
// fixed: 'left',
|
||||
sortable: true,
|
||||
width: 100
|
||||
sortable: 'custom',
|
||||
width: 100,
|
||||
filters: [
|
||||
{
|
||||
label: '家',
|
||||
value: 'home'
|
||||
},
|
||||
{
|
||||
label: '公司',
|
||||
value: 'company'
|
||||
}
|
||||
],
|
||||
// render (row) {
|
||||
// return `<i-button>${row.age}</i-button>`
|
||||
// }
|
||||
|
|
@ -93,25 +134,29 @@
|
|||
name: '梁灏',
|
||||
age: 25,
|
||||
address: '北京市朝阳区',
|
||||
edit: false
|
||||
edit: false,
|
||||
tag: 'home'
|
||||
},
|
||||
{
|
||||
name: '段模',
|
||||
age: 21,
|
||||
address: '北京市海淀区',
|
||||
edit: false
|
||||
edit: false,
|
||||
tag: 'company'
|
||||
},
|
||||
{
|
||||
name: '刘天娇',
|
||||
age: 27,
|
||||
address: '北京市东城区',
|
||||
edit: false
|
||||
edit: false,
|
||||
tag: 'company'
|
||||
},
|
||||
{
|
||||
name: '胡国伟',
|
||||
age: 22,
|
||||
address: '北京市西城区',
|
||||
edit: false
|
||||
edit: false,
|
||||
tag: 'home'
|
||||
}
|
||||
],
|
||||
height: 200
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue