update Table
update Table
This commit is contained in:
梁灏
parent
24b201465e
commit
5d0499ce1e
7 changed files with 80 additions and 29 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -37,7 +37,10 @@
|
|||
columns: Array,
|
||||
data: Array, // rebuildData
|
||||
objData: Object,
|
||||
fixed: Boolean
|
||||
fixed: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
rowClasses (_index) {
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
|
||||
<br>
|
||||
<i-table
|
||||
width="450"
|
||||
width="850"
|
||||
:height="height"
|
||||
stripe
|
||||
:border="true"
|
||||
|
|
@ -40,8 +40,8 @@
|
|||
columns: [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 50,
|
||||
fixed: 'left',
|
||||
width: 90,
|
||||
// fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
title: '姓名',
|
||||
key: 'name',
|
||||
align: 'left',
|
||||
fixed: 'left',
|
||||
// fixed: 'left',
|
||||
sortable: true,
|
||||
width: 100,
|
||||
filters: [
|
||||
|
|
@ -91,6 +91,7 @@
|
|||
filterMethod (value, row) {
|
||||
return row.tag === value;
|
||||
},
|
||||
// filteredValue: ['company'],
|
||||
render (row) {
|
||||
const type = `${row.tag}` === 'home' ? 'green' : 'red';
|
||||
return `<tag color="${type}">${row.tag}</tag>`;
|
||||
|
|
@ -129,7 +130,7 @@
|
|||
title: '地址',
|
||||
key: 'address',
|
||||
align: 'center',
|
||||
// fixed: 'right',
|
||||
// fixed: 'left',
|
||||
width: 100,
|
||||
// render (row, column, index) {
|
||||
// if (row.edit) {
|
||||
|
|
@ -142,17 +143,35 @@
|
|||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
// fixed: 'right',
|
||||
width: 250,
|
||||
render (row, column, index) {
|
||||
return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`;
|
||||
return `<a>${row.name}</a>`;
|
||||
// return `<a href="#">${row.name}</a>`;
|
||||
},
|
||||
filters: [
|
||||
{
|
||||
label: '两个字',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '三个字',
|
||||
value: 2
|
||||
}
|
||||
],
|
||||
filterMultiple: false,
|
||||
filterMethod (value, row) {
|
||||
if (value === 1) {
|
||||
return row.name.length == 2;
|
||||
} else if (value === 2) {
|
||||
return row.name.length == 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
name: '梁灏',
|
||||
name: '梁灏梁灏梁灏梁灏梁灏梁灏梁灏',
|
||||
age: 25,
|
||||
address: '北京市朝阳区',
|
||||
edit: false,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue