update Table
update Table
This commit is contained in:
梁灏
parent
adaeca88ba
commit
45e7ed7ef5
4 changed files with 111 additions and 73 deletions
|
|
@ -5,7 +5,7 @@
|
||||||
</colgroup>
|
</colgroup>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th v-for="column in columns" :class="alignCls(column)">
|
<th v-for="(index, column) in columns" :class="alignCls(column)">
|
||||||
<div :class="cellClasses(column)">
|
<div :class="cellClasses(column)">
|
||||||
<template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
|
<template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
|
|
@ -35,8 +35,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div slot="content" :class="[prefixCls + '-filter-list']" v-else>
|
<div slot="content" :class="[prefixCls + '-filter-list']" v-else>
|
||||||
<ul>
|
<ul>
|
||||||
<li :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: !column._filterChecked.lengtg}]">全部</li>
|
<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>
|
: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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</Poptip>
|
</Poptip>
|
||||||
|
|
@ -107,6 +112,9 @@
|
||||||
handleFilter (index) {
|
handleFilter (index) {
|
||||||
this.$parent.handleFilter(index);
|
this.$parent.handleFilter(index);
|
||||||
},
|
},
|
||||||
|
handleSelect (index, value) {
|
||||||
|
this.$parent.handleFilterSelect(index, value);
|
||||||
|
},
|
||||||
handleReset (index) {
|
handleReset (index) {
|
||||||
this.$parent.handleFilterReset(index);
|
this.$parent.handleFilterReset(index);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,61 +1,63 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="classes" :style="styles">
|
<div :class="wrapClasses" :style="styles">
|
||||||
<div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
|
<div :class="classes" :style="styles">
|
||||||
<div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
|
<div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
|
||||||
<table-head
|
<div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
|
||||||
: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">
|
|
||||||
<table-head
|
<table-head
|
||||||
fixed
|
:prefix-cls="prefixCls"
|
||||||
:prefix-cls="prefixCls"
|
:style="tableStyle"
|
||||||
:style="fixedTableStyle"
|
:columns="cloneColumns"
|
||||||
:columns="leftFixedColumns"
|
:obj-data="objData"></table-head>
|
||||||
:obj-data="objData"></table-head>
|
|
||||||
</div>
|
</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
|
<table-body
|
||||||
fixed
|
v-ref:tbody
|
||||||
:prefix-cls="prefixCls"
|
:prefix-cls="prefixCls"
|
||||||
:style="fixedTableStyle"
|
:style="tableStyle"
|
||||||
:columns="leftFixedColumns"
|
:columns="cloneColumns"
|
||||||
:data="rebuildData"
|
:data="rebuildData"
|
||||||
:obj-data="objData"></table-body>
|
:obj-data="objData"></table-body>
|
||||||
</div>
|
</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>
|
||||||
<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>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -129,11 +131,18 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
wrapClasses () {
|
||||||
|
return [
|
||||||
|
`${prefixCls}-wrapper`,
|
||||||
|
{
|
||||||
|
[`${prefixCls}-hide`]: !this.ready
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
classes () {
|
classes () {
|
||||||
return [
|
return [
|
||||||
`${prefixCls}`,
|
`${prefixCls}`,
|
||||||
{
|
{
|
||||||
[`${prefixCls}-hide`]: !this.ready,
|
|
||||||
[`${prefixCls}-${this.size}`]: !!this.size,
|
[`${prefixCls}-${this.size}`]: !!this.size,
|
||||||
[`${prefixCls}-border`]: this.border,
|
[`${prefixCls}-border`]: this.border,
|
||||||
[`${prefixCls}-stripe`]: this.stripe,
|
[`${prefixCls}-stripe`]: this.stripe,
|
||||||
|
|
@ -364,8 +373,15 @@
|
||||||
this.cloneColumns[index]._isFiltered = true;
|
this.cloneColumns[index]._isFiltered = true;
|
||||||
this.cloneColumns[index]._filterVisible = false;
|
this.cloneColumns[index]._filterVisible = false;
|
||||||
},
|
},
|
||||||
|
handleFilterSelect (index, value) {
|
||||||
|
this.cloneColumns[index]._filterChecked = [value];
|
||||||
|
this.handleFilter(index);
|
||||||
|
},
|
||||||
handleFilterReset (index) {
|
handleFilterReset (index) {
|
||||||
this.cloneColumns[index]._isFiltered = false;
|
this.cloneColumns[index]._isFiltered = false;
|
||||||
|
this.cloneColumns[index]._filterVisible = false;
|
||||||
|
this.cloneColumns[index]._filterChecked = [];
|
||||||
|
this.rebuildData = this.makeData();
|
||||||
},
|
},
|
||||||
makeData () {
|
makeData () {
|
||||||
let data = deepCopy(this.data);
|
let data = deepCopy(this.data);
|
||||||
|
|
|
||||||
|
|
@ -2,17 +2,21 @@
|
||||||
@table-select-item-prefix-cls: ~"@{table-prefix-cls}-filter-select-item";
|
@table-select-item-prefix-cls: ~"@{table-prefix-cls}-filter-select-item";
|
||||||
|
|
||||||
.@{table-prefix-cls} {
|
.@{table-prefix-cls} {
|
||||||
|
&-wrapper{
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid @border-color-base;
|
||||||
|
border-bottom: 0;
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
font-size: @font-size-small;
|
font-size: @font-size-small;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 1px solid @border-color-base;
|
|
||||||
border-bottom: 0;
|
|
||||||
border-right: 0;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: relative;
|
//position: relative;
|
||||||
|
|
||||||
&-hide{
|
&-hide{
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -202,7 +206,6 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
box-shadow: @shadow-right;
|
box-shadow: @shadow-right;
|
||||||
//overflow-x: hidden;
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,6 @@
|
||||||
<br>
|
<br>
|
||||||
<i-table
|
<i-table
|
||||||
width="450"
|
width="450"
|
||||||
:height="height"
|
|
||||||
stripe
|
stripe
|
||||||
border
|
border
|
||||||
highlight-row
|
highlight-row
|
||||||
|
|
@ -40,6 +39,7 @@
|
||||||
{
|
{
|
||||||
type: 'selection',
|
type: 'selection',
|
||||||
width: 50,
|
width: 50,
|
||||||
|
fixed: 'left',
|
||||||
align: 'center'
|
align: 'center'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -55,15 +55,22 @@
|
||||||
width: 100,
|
width: 100,
|
||||||
filters: [
|
filters: [
|
||||||
{
|
{
|
||||||
label: '家',
|
label: '大于25岁',
|
||||||
value: 'home'
|
value: 1
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '公司',
|
label: '小于25岁',
|
||||||
value: 'company'
|
value: 2
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
filterMultiple: false
|
filterMultiple: false,
|
||||||
|
filterMethod (value, row) {
|
||||||
|
if (value === 1) {
|
||||||
|
return row.age >= 25;
|
||||||
|
} else if (value === 2) {
|
||||||
|
return row.age < 25;
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '标签',
|
title: '标签',
|
||||||
|
|
@ -128,8 +135,8 @@
|
||||||
fixed: 'right',
|
fixed: 'right',
|
||||||
width: 120,
|
width: 120,
|
||||||
render (row, column, index) {
|
render (row, column, index) {
|
||||||
return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`
|
return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`;
|
||||||
// return `<a>${row.name}</a>`
|
return `<a>${row.name}</a>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
@ -139,28 +146,32 @@
|
||||||
age: 25,
|
age: 25,
|
||||||
address: '北京市朝阳区',
|
address: '北京市朝阳区',
|
||||||
edit: false,
|
edit: false,
|
||||||
tag: 'home'
|
tag: 'home',
|
||||||
|
action: 1
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '段模',
|
name: '段模',
|
||||||
age: 21,
|
age: 21,
|
||||||
address: '北京市海淀区',
|
address: '北京市海淀区',
|
||||||
edit: false,
|
edit: false,
|
||||||
tag: 'company'
|
tag: 'company',
|
||||||
|
action: 2
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '刘天娇',
|
name: '刘天娇',
|
||||||
age: 27,
|
age: 27,
|
||||||
address: '北京市东城区',
|
address: '北京市东城区',
|
||||||
edit: false,
|
edit: false,
|
||||||
tag: 'company'
|
tag: 'company',
|
||||||
|
action: 3
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '胡国伟',
|
name: '胡国伟',
|
||||||
age: 22,
|
age: 22,
|
||||||
address: '北京市西城区',
|
address: '北京市西城区',
|
||||||
edit: false,
|
edit: false,
|
||||||
tag: 'home'
|
tag: 'home',
|
||||||
|
action: 4
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
height: 200
|
height: 200
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue