update Table
update Table
This commit is contained in:
梁灏
parent
0d13646576
commit
e7e8c8ffb3
3 changed files with 132 additions and 9 deletions
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<div :class="[prefixCls + '-header']" v-if="showHeader">
|
||||
<div :class="classes" :style="styles">
|
||||
<div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
|
||||
<div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header>
|
||||
<table cellspacing="0" cellpadding="0" border="0" :style="tableStyle">
|
||||
<colgroup>
|
||||
<col v-for="column in columns" :width="setCellWidth(column, $index)">
|
||||
|
|
@ -12,7 +13,7 @@
|
|||
:columns="columns"></thead>
|
||||
</table>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<div :class="[prefixCls + '-body']" :style="bodyStyle">
|
||||
<table cellspacing="0" cellpadding="0" border="0" :style="tableStyle" v-el:tbody>
|
||||
<colgroup>
|
||||
<col v-for="column in columns" :width="setCellWidth(column, $index)">
|
||||
|
|
@ -20,7 +21,7 @@
|
|||
<tbody :class="[prefixCls + '-tbody']" v-el:render>
|
||||
<tr
|
||||
v-for="(index, row) in data"
|
||||
:class="[prefixCls + '-row', {[prefixCls + '-row-highlight']: cloneData[index] && cloneData[index]._isHighlight}]"
|
||||
:class="[prefixCls + '-row', rowClsName(index), {[prefixCls + '-row-highlight']: cloneData[index] && cloneData[index]._isHighlight}]"
|
||||
@click.stop="highlightCurrentRow(index)">
|
||||
<td v-for="column in columns" :class="alignCls(column)">
|
||||
<div :class="[prefixCls + '-cell']">
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -64,6 +66,9 @@
|
|||
return oneOf(value, ['small', 'large']);
|
||||
}
|
||||
},
|
||||
height: {
|
||||
type: [Number, String]
|
||||
},
|
||||
stripe: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
@ -79,6 +84,12 @@
|
|||
highlightRow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
rowClassName: {
|
||||
type: Function,
|
||||
default () {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -87,7 +98,10 @@
|
|||
columnsWidth: [],
|
||||
prefixCls: prefixCls,
|
||||
compiledUids: [],
|
||||
cloneData: deepCopy(this.data)
|
||||
cloneData: deepCopy(this.data),
|
||||
showSlotHeader: true,
|
||||
showSlotFooter: true,
|
||||
bodyHeight: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -97,17 +111,33 @@
|
|||
{
|
||||
[`${prefixCls}-${this.size}`]: !!this.size,
|
||||
[`${prefixCls}-border`]: this.border,
|
||||
[`${prefixCls}-stripe`]: this.stripe
|
||||
[`${prefixCls}-stripe`]: this.stripe,
|
||||
[`${prefixCls}-with-header`]: this.showSlotHeader,
|
||||
[`${prefixCls}-with-footer`]: this.showSlotFooter,
|
||||
[`${prefixCls}-with-fixed-top`]: !!this.height
|
||||
}
|
||||
]
|
||||
},
|
||||
styles () {
|
||||
let style = {};
|
||||
if (!!this.height) style.height = `${this.height}px`;
|
||||
return style;
|
||||
},
|
||||
tableStyle () {
|
||||
let style = {};
|
||||
if (this.tableWidth !== 0) style.width = `${this.tableWidth}px`;
|
||||
return style;
|
||||
},
|
||||
bodyStyle () {
|
||||
let style = {};
|
||||
if (this.bodyHeight !== 0) style.height = `${this.bodyHeight}px`;
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
rowClsName (index) {
|
||||
return this.rowClassName(this.data[index], index);
|
||||
},
|
||||
renderRow (row, column, index) {
|
||||
return column.type === 'index' ? index + 1 : column.render ? '' : row[column.key];
|
||||
},
|
||||
|
|
@ -203,10 +233,25 @@
|
|||
},
|
||||
selectAll () {
|
||||
this.$emit('on-select-all', this.getSelection());
|
||||
},
|
||||
fixedHeader () {
|
||||
if (!!this.height) {
|
||||
this.$nextTick(() => {
|
||||
const titleHeight = parseInt(getStyle(this.$els.title, 'height')) || 0;
|
||||
const headerHeight = parseInt(getStyle(this.$els.header, 'height')) || 0;
|
||||
const footerHeight = parseInt(getStyle(this.$els.footer, 'height')) || 0;
|
||||
this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
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, '') !== '';
|
||||
},
|
||||
ready () {
|
||||
this.compileRender();
|
||||
this.fixedHeader();
|
||||
window.addEventListener('resize', this.handleResize, false);
|
||||
},
|
||||
beforeDestroy () {
|
||||
|
|
@ -225,6 +270,9 @@
|
|||
this.compileRender(true);
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
height () {
|
||||
this.fixedHeader();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,46 @@
|
|||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
&-with-header{
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
|
||||
&-with-footer{
|
||||
border: 1px solid @border-color-base;
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
}
|
||||
|
||||
&-with-header&-with-footer{
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
&-title, &-footer{
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
}
|
||||
&-footer{
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&-body{
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-with-fixed-top{
|
||||
border-bottom: 1px solid @border-color-base;
|
||||
}
|
||||
&-with-fixed-top&-with-footer{
|
||||
.@{table-prefix-cls}-footer{
|
||||
border-top: 1px solid @border-color-base;
|
||||
}
|
||||
tbody tr:last-child td{
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
th, td
|
||||
{
|
||||
min-width: 0;
|
||||
|
|
@ -96,6 +136,10 @@
|
|||
td{
|
||||
height: 60px;
|
||||
}
|
||||
&-title, &-footer{
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
&-small{
|
||||
|
|
@ -105,6 +149,10 @@
|
|||
td{
|
||||
height: 40px;
|
||||
}
|
||||
&-title, &-footer{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&-row-highlight,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,26 @@
|
|||
<style>
|
||||
body{
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
|
||||
<br>
|
||||
<i-table border :columns="columns" :data="data" @on-current-change="current" @on-select="select" @on-selection-change="schange" @on-select-all="sall"></i-table>
|
||||
<i-table
|
||||
border
|
||||
:height="height"
|
||||
highlight-row
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:row-class-name="rowClsName"
|
||||
@on-current-change="current"
|
||||
@on-select="select"
|
||||
@on-selection-change="schange"
|
||||
@on-select-all="sall">
|
||||
<!--<div slot="header">表格标题</div>-->
|
||||
<!--<div slot="footer">表格标题</div>-->
|
||||
</i-table>
|
||||
<br>
|
||||
<!--<i-table size="small" border stripe :columns="columns" :data="data"></i-table>-->
|
||||
</div>
|
||||
|
|
@ -81,7 +99,8 @@
|
|||
address: '北京市西城区',
|
||||
edit: false
|
||||
}
|
||||
]
|
||||
],
|
||||
height: 200
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -108,11 +127,19 @@
|
|||
},
|
||||
sall (a) {
|
||||
console.log(a)
|
||||
},
|
||||
rowClsName (row, index) {
|
||||
if (index == 1) {
|
||||
return 'row-success';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
setTimeout(() => {
|
||||
// return
|
||||
// this.height = 150;
|
||||
return
|
||||
this.data.push({
|
||||
name: '刘天娇2',
|
||||
age: 272,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue