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-24 15:27:46 +08:00
parent 744eb0af93
commit 0d13646576
7 changed files with 306 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,24 +1,35 @@
<template>
<div :class="classes">
<div :class="[prefixCls + '-header']">
<table cellspacing="0" cellpadding="0" border="0" :style="{width: tableWidth + 'px'}">
<div :class="[prefixCls + '-header']" v-if="showHeader">
<table cellspacing="0" cellpadding="0" border="0" :style="tableStyle">
<colgroup>
<col v-for="column in columns" :width="setCellWidth(column, $index)">
</colgroup>
<thead
is="table-head"
:prefix-cls="prefixCls + '-thead'"
:prefix-cls="prefixCls"
:clone-data.sync="cloneData"
:columns="columns"></thead>
</table>
</div>
<div :class="[prefixCls + '-body']">
<table cellspacing="0" cellpadding="0" border="0" :style="{width: tableWidth + 'px'}" v-el:tbody>
<table cellspacing="0" cellpadding="0" border="0" :style="tableStyle" v-el:tbody>
<colgroup>
<col v-for="column in columns" :width="setCellWidth(column, $index)">
</colgroup>
<tbody :class="[prefixCls + '-tbody']" v-el:render>
<tr :class="[prefixCls + '-row']" v-for="(index, row) in data">
<td v-for="column in columns">{{{ renderRow(row, column) }}}</td>
<tr
v-for="(index, row) in data"
:class="[prefixCls + '-row', {[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']">
<template v-if="column.type === 'selection'">
<Checkbox :checked="cloneData[index] && cloneData[index]._isChecked" @on-change="toggleSelect(index)"></Checkbox>
</template>
<template v-else>{{{ renderRow(row, column, index) }}}</template>
</div>
</td>
</tr>
</tbody>
</table>
@ -27,11 +38,14 @@
</template>
<script>
import TableHead from './table-head.vue';
import { oneOf, getStyle } from '../../utils/assist';
import Checkbox from '../checkbox/checkbox.vue';
import Mixin from './mixin';
import { oneOf, getStyle, deepCopy } from '../../utils/assist';
const prefixCls = 'ivu-table';
export default {
components: { TableHead },
mixins: [ Mixin ],
components: { TableHead, Checkbox },
props: {
data: {
type: Array,
@ -58,21 +72,11 @@
type: Boolean,
default: false
},
fit: {
type: Boolean,
default: true
},
showHeader: {
type: Boolean,
default: true
},
selection: {
validator (value) {
return oneOf(value, ['single', 'multiple', false]);
},
default: false
},
showIndex: {
highlightRow: {
type: Boolean,
default: false
}
@ -82,7 +86,8 @@
tableWidth: 0,
columnsWidth: [],
prefixCls: prefixCls,
compiledUids: []
compiledUids: [],
cloneData: deepCopy(this.data)
}
},
computed: {
@ -90,14 +95,21 @@
return [
`${prefixCls}`,
{
[`${prefixCls}-${this.size}`]: !!this.size
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-border`]: this.border,
[`${prefixCls}-stripe`]: this.stripe
}
]
},
tableStyle () {
let style = {};
if (this.tableWidth !== 0) style.width = `${this.tableWidth}px`;
return style;
}
},
methods: {
renderRow (row, column) {
return 'render' in column ? '' : row[column.key];
renderRow (row, column, index) {
return column.type === 'index' ? index + 1 : column.render ? '' : row[column.key];
},
compileRender (update = false) {
this.$nextTick(() => {
@ -117,7 +129,7 @@
const column = this.columns[i];
if (column.render) {
for (let j = 0; j < this.data.length; j++) {
// todo 做一个缓存，只在需要改render时再重新编译，否则data改变时不用再编译
// todo 做一个缓存，只在需要改render时再重新编译，data改变时不用再编译
const row = this.data[j];
const template = column.render(row, column, j);
const cell = document.createElement('div');
@ -129,8 +141,8 @@
if (_oldParentChildLen !== _newParentChildLen) { // if render normal html node, do not tag
this.compiledUids.push(this.$parent.$children[this.$parent.$children.length - 1]._uid); // tag it, and delete when data or columns update
}
$el.children[j].children[i].innerHTML = '';
$el.children[j].children[i].appendChild(cell);
$el.children[j].children[i].children[0].innerHTML = '';
$el.children[j].children[i].children[0].appendChild(cell);
}
}
}
@ -148,6 +160,49 @@
},
setCellWidth (column, index) {
return column.width ? column.width : this.columnsWidth[index];
},
highlightCurrentRow (index) {
if (!this.highlightRow || this.cloneData[index]._isHighlight) return;
let oldIndex = -1;
this.cloneData.forEach((item, index) => {
if (item._isHighlight) {
oldIndex = index;
item._isHighlight = false;
return true;
}
});
const row = Object.assign({}, this.cloneData[index], {
_isHighlight: true
});
this.cloneData.$set(index, row);
const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.data[oldIndex]));
this.$emit('on-current-change', JSON.parse(JSON.stringify(this.data[index])), oldData);
},
getSelection () {
let selectionIndexes = [];
this.cloneData.forEach((data, index) => {
if (data._isChecked) selectionIndexes.push(index);
});
return JSON.parse(JSON.stringify(this.data.filter((data, index) => selectionIndexes.indexOf(index) > -1)));
},
toggleSelect (index) {
const status = !this.cloneData[index]._isChecked;
const row = Object.assign({}, this.cloneData[index], {
_isChecked: status
});
this.cloneData.$set(index, row);
const selection = this.getSelection();
if (status) {
this.$emit('on-select', selection, JSON.parse(JSON.stringify(this.data[index])));
}
this.$emit('on-selection-change', selection);
},
selectAll () {
this.$emit('on-select-all', this.getSelection());
}
},
ready () {
@ -160,6 +215,7 @@
watch: {
data: {
handler () {
this.cloneData = deepCopy(this.data);
this.compileRender(true);
},
deep: true