drip-public/iview
6
1
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-26 08:57:09 +08:00
parent 3ef4dfb9ef
commit 7f34c51030
6 changed files with 149 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,7 +17,8 @@
row: Object, row: Object,
column: Object, column: Object,
index: Number, index: Number,
checked: Boolean checked: Boolean,
fixed: Boolean
}, },
data () { data () {
return { return {
@ -30,7 +31,7 @@
return [ return [
`${this.prefixCls}-cell`, `${this.prefixCls}-cell`,
{ {
[`${this.prefixCls}-hidden`]: this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right') [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right')
} }
] ]
} }
@ -38,29 +39,31 @@
methods: { methods: {
compile () { compile () {
if (this.column.render) { if (this.column.render) {
const $parent = this.$parent.$parent.$parent;
const template = this.column.render(this.row, this.column, this.index); const template = this.column.render(this.row, this.column, this.index);
const cell = document.createElement('div'); const cell = document.createElement('div');
cell.innerHTML = template; cell.innerHTML = template;
const _oldParentChildLen = this.$parent.$parent.$children.length; const _oldParentChildLen = $parent.$children.length;
this.$parent.$parent.$compile(cell); $parent.$compile(cell);
const _newParentChildLen = this.$parent.$parent.$children.length; const _newParentChildLen = $parent.$children.length;
if (_oldParentChildLen !== _newParentChildLen) { // if render normal html node, do not tag if (_oldParentChildLen !== _newParentChildLen) { // if render normal html node, do not tag
this.uid = this.$parent.$parent.$children[this.$parent.$parent.$children.length - 1]._uid; // tag it, and delete when data or columns update this.uid = $parent.$children[$parent.$children.length - 1]._uid; // tag it, and delete when data or columns update
} }
this.$el.innerHTML = ''; this.$el.innerHTML = '';
this.$el.appendChild(cell); this.$el.appendChild(cell);
} }
}, },
destroy () { destroy () {
for (let i = 0; i < this.$parent.$parent.$children.length; i++) { const $parent = this.$parent.$parent.$parent;
if (this.$parent.$parent.$children[i]._uid === this.uid) { for (let i = 0; i < $parent.$children.length; i++) {
this.$parent.$parent.$children[i].$destroy(); if ($parent.$children[i]._uid === this.uid) {
$parent.$children[i].$destroy();
} }
} }
}, },
toggleSelect (index) { toggleSelect (index) {
this.$parent.toggleSelect(index); this.$parent.$parent.toggleSelect(index);
} }
}, },
compiled () { compiled () {

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

@ -1,23 +1,59 @@
<template> <template>
<table cellspacing="0" cellpadding="0" border="0"> <table cellspacing="0" cellpadding="0" border="0" :style="style">
<colgroup>
<col v-for="column in columns" :width="setCellWidth(column, $index)">
</colgroup>
<tbody :class="[prefixCls + '-tbody']">
<tr
v-for="(index, row) in data"
:class="[prefixCls + '-row', rowClsName(index), {[prefixCls + '-row-highlight']: cloneData[index] && cloneData[index]._isHighlight, [prefixCls + '-row-hover']: cloneData[index] && cloneData[index]._isHover}]"
@mouseenter.stop="handleMouseIn(index)"
@mouseleave.stop="handleMouseOut(index)"
@click.stop="highlightCurrentRow(index)">
<td v-for="column in columns" :class="alignCls(column)">
<Cell
:fixed="fixed"
:prefix-cls="prefixCls"
:row="row"
:column="column"
:index="index"
:checked="cloneData[index] && cloneData[index]._isChecked"></Cell>
</td>
</tr>
</tbody>
</table> </table>
</template> </template>
<script> <script>
import Cell from './cell.vue';
import Mixin from './mixin';
export default { export default {
mixins: [ Mixin ],
components: { Cell },
props: { props: {
prefixCls: String,
}, style: Object,
data () { columns: Array,
return { data: Array,
cloneData: Array,
} fixed: Boolean
},
computed: {
}, },
methods: { methods: {
setCellWidth (column, index) {
return this.$parent.setCellWidth(column, index);
},
rowClsName (index) {
return this.$parent.rowClassName(this.data[index], index);
},
handleMouseIn (index) {
this.$parent.handleMouseIn(index);
},
handleMouseOut (index) {
this.$parent.handleMouseOut(index);
},
highlightCurrentRow (index) {
this.$parent.highlightCurrentRow(index);
}
} }
} }
</script> </script>

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

@ -1,14 +1,19 @@
<template> <template>
<thead> <table cellspacing="0" cellpadding="0" border="0" :style="style">
<tr> <colgroup>
<th v-for="column in columns" :class="alignCls(column)"> <col v-for="column in columns" :width="setCellWidth(column, $index)">
<div :class="[prefixCls + '-cell', {[prefixCls + '-hidden']: column.fixed && (column.fixed === 'left' || column.fixed === 'right')}]"> </colgroup>
<template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template> <thead>
<template v-else>{{{ renderHeader(column, $index) }}}</template> <tr>
</div> <th v-for="column in columns" :class="alignCls(column)">
</th> <div :class="[prefixCls + '-cell', {[prefixCls + '-hidden']: !fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right')}]">
</tr> <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
</thead> <template v-else>{{{ renderHeader(column, $index) }}}</template>
</div>
</th>
</tr>
</thead>
</table>
</template> </template>
<script> <script>
import Checkbox from '../checkbox/checkbox.vue'; import Checkbox from '../checkbox/checkbox.vue';
@ -20,13 +25,10 @@
components: { Checkbox }, components: { Checkbox },
props: { props: {
prefixCls: String, prefixCls: String,
style: Object,
columns: Array, columns: Array,
cloneData: Array cloneData: Array,
}, fixed: Boolean
data () {
return {
}
}, },
computed: { computed: {
isSelectAll () { isSelectAll () {
@ -34,6 +36,9 @@
} }
}, },
methods: { methods: {
setCellWidth (column, index) {
return this.$parent.setCellWidth(column, index);
},
renderHeader (column, $index) { renderHeader (column, $index) {
if ('renderHeader' in this.columns[$index]) { if ('renderHeader' in this.columns[$index]) {
return this.columns[$index].renderHeader(column, $index); return this.columns[$index].renderHeader(column, $index);

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

@ -2,70 +2,51 @@
<div :class="classes" :style="styles"> <div :class="classes" :style="styles">
<div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div> <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 @mousewheel="handleMouseWheel"> <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
<table cellspacing="0" cellpadding="0" border="0" :style="tableStyle"> <table-head
<colgroup> :prefix-cls="prefixCls"
<col v-for="column in cloneColumns" :width="setCellWidth(column, $index)"> :style="tableStyle"
</colgroup> :columns="cloneColumns"
<thead :clone-data="cloneData"></table-head>
is="table-head"
:prefix-cls="prefixCls"
:clone-data.sync="cloneData"
:columns="cloneColumns"></thead>
</table>
</div> </div>
<div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll"> <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
<table cellspacing="0" cellpadding="0" border="0" :style="tableStyle" v-el:tbody> <table-body
<colgroup> v-ref:tbody
<col v-for="column in cloneColumns" :width="setCellWidth(column, $index)"> :prefix-cls="prefixCls"
</colgroup> :style="tableStyle"
<tbody :class="[prefixCls + '-tbody']" v-el:render> :columns="cloneColumns"
<tr :data="data"
v-for="(index, row) in data" :clone-data="cloneData"></table-body>
:class="[prefixCls + '-row', rowClsName(index), {[prefixCls + '-row-highlight']: cloneData[index] && cloneData[index]._isHighlight, [prefixCls + '-row-hover']: cloneData[index] && cloneData[index]._isHover}]"
@mouseenter.stop="handleMouseIn(index)"
@mouseleave.stop="handleMouseOut(index)"
@click.stop="highlightCurrentRow(index)">
<td v-for="column in cloneColumns" :class="alignCls(column)">
<Cell
:prefix-cls="prefixCls"
:row="row"
:column="column"
:index="index"
:checked="cloneData[index] && cloneData[index]._isChecked"></Cell>
</td>
</tr>
</tbody>
</table>
</div> </div>
<div :class="[prefixCls + '-fixed']"> <div :class="[prefixCls + '-fixed']">
<table cellspacing="0" cellpadding="0" border="0"> <!--todo设置个div头部-->
<colgroup> <table-body
<col v-for="column in leftFixedColumns" :width="setCellWidth(column, $index)"> fixed
</colgroup> :prefix-cls="prefixCls"
<tbody :class="[prefixCls + '-tbody']"> :style="fixedTableStyle"
<tr> :columns="leftFixedColumns"
:data="data"
</tr> :clone-data="cloneData"></table-body>
</tbody>
</table>
</div> </div>
<div :class="[prefixCls + '-fixed-right']"> <div :class="[prefixCls + '-fixed-right']">
<table-body
fixed
:prefix-cls="prefixCls"
:style="fixedRightTableStyle"
:columns="rightFixedColumns"
:data="data"
:clone-data="cloneData"></table-body>
</div> </div>
<div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div> <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
</div> </div>
</template> </template>
<script> <script>
import TableHead from './table-head.vue'; import tableHead from './table-head.vue';
import Checkbox from '../checkbox/checkbox.vue'; import tableBody from './table-body.vue';
import Cell from './cell.vue';
import Mixin from './mixin';
import { oneOf, getStyle, deepCopy } from '../../utils/assist'; import { oneOf, getStyle, deepCopy } from '../../utils/assist';
const prefixCls = 'ivu-table'; const prefixCls = 'ivu-table';
export default { export default {
mixins: [ Mixin ], components: { tableHead, tableBody },
components: { TableHead, Checkbox, Cell },
props: { props: {
data: { data: {
type: Array, type: Array,
@ -154,6 +135,16 @@
if (this.tableWidth !== 0) style.width = `${this.tableWidth}px`; if (this.tableWidth !== 0) style.width = `${this.tableWidth}px`;
return style; return style;
}, },
fixedTableStyle () {
let style = {};
if (this.leftFixedColumns.length) style.width = this.leftFixedColumns.reduce((a, b) => a + b);
return style;
},
fixedRightTableStyle () {
let style = {};
if (this.rightFixedColumns.length) style.width = this.rightFixedColumns.reduce((a, b) => a + b);
return style;
},
bodyStyle () { bodyStyle () {
let style = {}; let style = {};
if (this.bodyHeight !== 0) style.height = `${this.bodyHeight}px`; if (this.bodyHeight !== 0) style.height = `${this.bodyHeight}px`;
@ -177,7 +168,7 @@
let autoWidthIndex = -1; let autoWidthIndex = -1;
if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width); if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);
const $td = this.$els.tbody.querySelectorAll('tbody tr')[0].querySelectorAll('td'); const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td');
for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox
if (i === autoWidthIndex) { if (i === autoWidthIndex) {
this.columnsWidth.push(parseInt(getStyle($td[i], 'width')) - 1); this.columnsWidth.push(parseInt(getStyle($td[i], 'width')) - 1);

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

@ -189,4 +189,29 @@
background-color: @table-td-highlight-bg; background-color: @table-td-highlight-bg;
} }
} }
&-fixed, &-fixed-right{
position: absolute;
top: 0;
left: 0;
box-shadow: 1px 0 8px #d3d4d6;
overflow-x: hidden;
&::before {
content: '';
width: 100%;
height: 1px;
background-color: @border-color-base;
position: absolute;
left: 0;
bottom: 0;
z-index: 4;
}
}
&-fixed-right{
top: 0;
left: auto;
right: 0;
box-shadow: -1px 0 8px #d3d4d6;
}
} }

2
test/routers/table.vue
View file

@ -145,7 +145,7 @@
}, },
ready () { ready () {
setTimeout(() => { setTimeout(() => {
return; // return;
// this.height = 150; // this.height = 150;
// return // return
// this.data.push({ // this.data.push({