update Table compoent
update Table compoent
This commit is contained in:
梁灏
parent
2cb8a6d93e
commit
744eb0af93
5 changed files with 81 additions and 8 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="column in columns">{{{ renderHeader(column, $index) }}}</th>
|
||||
<th v-for="column in columns" :class="fixedCls(column)">{{{ renderHeader(column, $index) }}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</template>
|
||||
|
|
@ -26,6 +26,9 @@
|
|||
} else {
|
||||
return column.title || '#';
|
||||
}
|
||||
},
|
||||
fixedCls (column) {
|
||||
return column.fixed ? `${this.prefixCls}-${column.fixed}` : '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,21 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<table>
|
||||
<div :class="[prefixCls + '-header']">
|
||||
<table cellspacing="0" cellpadding="0" border="0" :style="{width: tableWidth + 'px'}">
|
||||
<colgroup>
|
||||
<col v-for="column in columns" :width="column.width">
|
||||
<col v-for="column in columns" :width="setCellWidth(column, $index)">
|
||||
</colgroup>
|
||||
<thead
|
||||
is="table-head"
|
||||
:prefix-cls="prefixCls + '-thead'"
|
||||
:columns="columns"></thead>
|
||||
</table>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<table cellspacing="0" cellpadding="0" border="0" :style="{width: tableWidth + 'px'}" 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>
|
||||
|
|
@ -20,7 +27,7 @@
|
|||
</template>
|
||||
<script>
|
||||
import TableHead from './table-head.vue';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
import { oneOf, getStyle } from '../../utils/assist';
|
||||
const prefixCls = 'ivu-table';
|
||||
|
||||
export default {
|
||||
|
|
@ -72,6 +79,8 @@
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
tableWidth: 0,
|
||||
columnsWidth: [],
|
||||
prefixCls: prefixCls,
|
||||
compiledUids: []
|
||||
}
|
||||
|
|
@ -108,7 +117,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');
|
||||
|
|
@ -125,11 +134,28 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
this.handleResize();
|
||||
});
|
||||
},
|
||||
handleResize () {
|
||||
this.tableWidth = parseInt(getStyle(this.$el, 'width'));
|
||||
this.$nextTick(() => {
|
||||
this.columnsWidth = [];
|
||||
this.$els.tbody.querySelectorAll('tbody tr')[0].querySelectorAll('td').forEach((cell) => {
|
||||
this.columnsWidth.push(parseInt(getStyle(cell, 'width')));
|
||||
});
|
||||
});
|
||||
},
|
||||
setCellWidth (column, index) {
|
||||
return column.width ? column.width : this.columnsWidth[index];
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
this.compileRender();
|
||||
window.addEventListener('resize', this.handleResize, false);
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('resize', this.handleResize, false);
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
|
|
|
|||
|
|
@ -27,4 +27,5 @@
|
|||
@import "input";
|
||||
@import "slider";
|
||||
@import "cascader";
|
||||
@import "transfer";
|
||||
@import "transfer";
|
||||
@import "table";
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
@table-prefix-cls: ~"@{css-prefix}table";
|
||||
|
||||
.@{table-prefix-cls} {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
background-color: #fff;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid @border-color-base;
|
||||
color: @text-color;
|
||||
font-size: @font-size-small;
|
||||
|
||||
&-large {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
& th {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& th,
|
||||
td
|
||||
{
|
||||
min-width: 0;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
border-bottom: 1px solid @border-color-base;
|
||||
}
|
||||
}
|
||||
|
|
@ -13,11 +13,15 @@
|
|||
columns: [
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
key: 'name',
|
||||
fixed: 'left',
|
||||
// width: 100
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
key: 'age',
|
||||
fixed: 'right',
|
||||
// width: 100
|
||||
// render (row) {
|
||||
// return `<i-button>${row.age}</i-button>`
|
||||
// }
|
||||
|
|
@ -25,6 +29,8 @@
|
|||
{
|
||||
title: '地址',
|
||||
key: 'address',
|
||||
fixed: 'center',
|
||||
// width: 100
|
||||
// render (row, column, index) {
|
||||
// if (row.edit) {
|
||||
// return `<i-input :value.sync="data[${index}].name"></i-input>`;
|
||||
|
|
@ -36,6 +42,7 @@
|
|||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
// width: 200,
|
||||
render (row, column, index) {
|
||||
return `<i-button @click="edit(${index})">编辑</i-button>`
|
||||
}
|
||||
|
|
@ -76,6 +83,7 @@
|
|||
},
|
||||
ready () {
|
||||
setTimeout(() => {
|
||||
return;
|
||||
this.data.push({
|
||||
name: '刘天娇2',
|
||||
age: 272,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue