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-30 13:17:55 +08:00
parent 24b201465e
commit 5d0499ce1e
7 changed files with 80 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,7 +19,10 @@
naturalIndex: Number, // index of rebuildData
index: Number, // _index of data
checked: Boolean,
fixed: Boolean
fixed: {
type: [Boolean, String],
default: false
}
},
data () {
return {

10
src/components/table/mixin.js
View file

@ -1,7 +1,15 @@
export default {
methods: {
alignCls (column) {
return column.align ? `${this.prefixCls}-column-${column.align}` : '';
return [
{
[`${this.prefixCls}-column-${column.align}`]: column.align,
[`${this.prefixCls}-hidden`]: (this.fixed === 'left' && column.fixed !== 'left') || (this.fixed === 'right' && column.fixed !== 'right') || (!this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right'))
}
]
},
isPopperShow (column) {
return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
}
}
}

5
src/components/table/table-body.vue
View file

@ -37,7 +37,10 @@
columns: Array,
data: Array, // rebuildData
objData: Object,
fixed: Boolean
fixed: {
type: [Boolean, String],
default: false
}
},
methods: {
rowClasses (_index) {

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

@ -15,7 +15,7 @@
<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 && (fixed || (!fixed && !column.fixed))"
v-if="isPopperShow(column)"
:visible.sync="column._filterVisible"
placement="bottom"
@on-popper-hide="handleFilterHide($index)">
@ -69,7 +69,10 @@
columns: Array,
objData: Object,
data: Array, // rebuildData
fixed: Boolean
fixed: {
type: [Boolean, String],
default: false
}
},
computed: {
isSelectAll () {

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

@ -19,10 +19,10 @@
:data="rebuildData"
:obj-data="objData"></table-body>
</div>
<div :class="[prefixCls + '-fixed']">
<div :class="[prefixCls + '-fixed']" :style="fixedTableStyle">
<div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
<table-head
fixed
fixed="left"
:prefix-cls="prefixCls"
:style="fixedTableStyle"
:columns="leftFixedColumns"
@ -31,7 +31,7 @@
</div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
<table-body
fixed
fixed="left"
:prefix-cls="prefixCls"
:style="fixedTableStyle"
:columns="leftFixedColumns"
@ -39,10 +39,10 @@
:obj-data="objData"></table-body>
</div>
</div>
<div :class="[prefixCls + '-fixed-right']">
<div :class="[prefixCls + '-fixed-right']" :style="fixedRightTableStyle">
<div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
<table-head
fixed
fixed="right"
:prefix-cls="prefixCls"
:style="fixedRightTableStyle"
:columns="rightFixedColumns"
@ -51,7 +51,7 @@
</div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
<table-body
fixed
fixed="right"
:prefix-cls="prefixCls"
:style="fixedRightTableStyle"
:columns="rightFixedColumns"
@ -126,7 +126,7 @@
prefixCls: prefixCls,
compiledUids: [],
objData: this.makeObjData(), // checkbox or highlight-row
rebuildData: this.makeData(), // for sort or filter
rebuildData: [], // for sort or filter
cloneColumns: this.makeColumns(),
showSlotHeader: true,
showSlotFooter: true,
@ -168,12 +168,20 @@
},
fixedTableStyle () {
let style = {};
if (this.leftFixedColumns.length) style.width = this.leftFixedColumns.reduce((a, b) => a + b);
let width = 0;
this.leftFixedColumns.forEach((col) => {
if (col.fixed && col.fixed === 'left') width += col.width;
});
style.width = `${width}px`;
return style;
},
fixedRightTableStyle () {
let style = {};
if (this.rightFixedColumns.length) style.width = this.rightFixedColumns.reduce((a, b) => a + b);
let width = 0;
this.rightFixedColumns.forEach((col) => {
if (col.fixed && col.fixed === 'right') width += col.width;
});
style.width = `${width}px`;
return style;
},
bodyStyle () {
@ -188,21 +196,27 @@
},
leftFixedColumns () {
let left = [];
let other = [];
this.cloneColumns.forEach((col) => {
if (col.fixed && col.fixed === 'left') {
left.push(col);
} else {
other.push(col);
}
});
return left;
return left.concat(other);
},
rightFixedColumns () {
let right = [];
let other = [];
this.cloneColumns.forEach((col) => {
if (col.fixed && col.fixed === 'right') {
right.push(col);
} else {
other.push(col);
}
});
return right;
return right.concat(other);
}
},
methods: {
@ -457,6 +471,10 @@
} else {
column._filterMultiple = true;
}
if ('filteredValue' in column) {
column._filterChecked = column.filteredValue;
column._isFiltered = true;
}
if (column.fixed && column.fixed === 'left') {
left.push(column);
@ -472,6 +490,7 @@
compiled () {
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, '') !== '';
this.rebuildData = this.makeDataWithSortAndFilter();
},
ready () {
this.handleResize();

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

@ -206,7 +206,6 @@
position: absolute;
top: 0;
left: 0;
//box-shadow: @shadow-right;
box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);
&::before {
@ -224,13 +223,10 @@
top: 0;
left: auto;
right: 0;
//box-shadow: @shadow-left;
box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
}
&-fixed-header{
overflow: hidden;
//position: relative;
//z-index: 3;
}
&-fixed-body{
overflow: hidden;