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:
梁灏 2017-01-05 13:15:26 +08:00
parent f23d6ba1ac
commit 3d6fa54b39
5 changed files with 288 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/table/mixin.js
View file

@ -11,15 +11,22 @@ export default {
isPopperShow (column) { isPopperShow (column) {
return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right')); return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
}, },
setCellWidth (column) { setCellWidth (column, index, top) {
// return column.width ? column.width : this.columnsWidth[index];
let width = ''; let width = '';
if (column.width) { if (column.width) {
width = column.width; width = column.width;
} else if (this.columnsWidth[column._index]) { } else if (this.columnsWidth[column._index]) {
width = this.columnsWidth[column._index].width; width = this.columnsWidth[column._index].width;
} }
// return this.columnsWidth[column._index] ? this.columnsWidth[column._index].width : ''; // when browser has scrollBar,set a width to resolve scroll position bug
if (this.columns.length === index + 1 && top) {
width += this.$parent.scrollBarWidth;
}
// when fixed type,reset first right fixed column's width
if (this.fixed === 'right') {
const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
if (firstFixedIndex === index) width += this.$parent.scrollBarWidth;
}
return width; return width;
} }
} }

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

@ -1,7 +1,7 @@
<template> <template>
<table cellspacing="0" cellpadding="0" border="0" :style="style"> <table cellspacing="0" cellpadding="0" border="0" :style="style">
<colgroup> <colgroup>
<col v-for="column in columns" :width="setCellWidth(column, $index)"> <col v-for="column in columns" :width="setCellWidth(column, $index, false)">
</colgroup> </colgroup>
<tbody :class="[prefixCls + '-tbody']"> <tbody :class="[prefixCls + '-tbody']">
<tr <tr

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

@ -1,7 +1,7 @@
<template> <template>
<table cellspacing="0" cellpadding="0" border="0" :style="style"> <table cellspacing="0" cellpadding="0" border="0" :style="style">
<colgroup> <colgroup>
<col v-for="column in columns" :width="setCellWidth(column, $index)"> <col v-for="column in columns" :width="setCellWidth(column, $index, true)">
</colgroup> </colgroup>
<thead> <thead>
<tr> <tr>

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

@ -85,7 +85,7 @@
<script> <script>
import tableHead from './table-head.vue'; import tableHead from './table-head.vue';
import tableBody from './table-body.vue'; import tableBody from './table-body.vue';
import { oneOf, getStyle, deepCopy } from '../../utils/assist'; import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist';
import Csv from '../../utils/csv'; import Csv from '../../utils/csv';
import ExportCsv from './export-csv'; import ExportCsv from './export-csv';
const prefixCls = 'ivu-table'; const prefixCls = 'ivu-table';
@ -143,11 +143,11 @@
}, },
noDataText: { noDataText: {
type: String, type: String,
default: '无数据' default: '暂无数据'
}, },
noFilteredDataText: { noFilteredDataText: {
type: String, type: String,
default: '无筛选结果' default: '暂无筛选结果'
} }
}, },
data () { data () {
@ -162,7 +162,8 @@
cloneColumns: this.makeColumns(), cloneColumns: this.makeColumns(),
showSlotHeader: true, showSlotHeader: true,
showSlotFooter: true, showSlotFooter: true,
bodyHeight: 0 bodyHeight: 0,
scrollBarWidth: getScrollBarSize()
}; };
}, },
computed: { computed: {
@ -189,13 +190,19 @@
}, },
styles () { styles () {
let style = {}; let style = {};
if (this.height) style.height = `${this.height}px`; if (this.height) {
const height = (this.isLeftFixed || this.isRightFixed) ? parseInt(this.height) + this.scrollBarWidth : parseInt(this.height);
style.height = `${height}px`;
}
if (this.width) style.width = `${this.width}px`; if (this.width) style.width = `${this.width}px`;
return style; return style;
}, },
tableStyle () { tableStyle () {
let style = {}; let style = {};
if (this.tableWidth !== 0) style.width = `${this.tableWidth}px`; if (this.tableWidth !== 0) {
const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth;
style.width = `${width}px`;
}
return style; return style;
}, },
fixedTableStyle () { fixedTableStyle () {
@ -213,17 +220,24 @@
this.rightFixedColumns.forEach((col) => { this.rightFixedColumns.forEach((col) => {
if (col.fixed && col.fixed === 'right') width += col._width; if (col.fixed && col.fixed === 'right') width += col._width;
}); });
width += this.scrollBarWidth;
style.width = `${width}px`; style.width = `${width}px`;
return style; return style;
}, },
bodyStyle () { bodyStyle () {
let style = {}; let style = {};
if (this.bodyHeight !== 0) style.height = `${this.bodyHeight}px`; if (this.bodyHeight !== 0) {
// add a height to resolve scroll bug when browser has a scrollBar in fixed type and height prop
const height = (this.isLeftFixed || this.isRightFixed) ? this.bodyHeight + this.scrollBarWidth : this.bodyHeight;
style.height = `${height}px`;
}
return style; return style;
}, },
fixedBodyStyle () { fixedBodyStyle () {
let style = {}; let style = {};
if (this.bodyHeight !== 0) style.height = `${this.bodyHeight - 1}px`; if (this.bodyHeight !== 0) {
style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`;
}
return style; return style;
}, },
leftFixedColumns () { leftFixedColumns () {

315
test/routers/table.vue
View file

@ -1,80 +1,273 @@
<style>
body{
overflow: hidden;
}
</style>
<template> <template>
<i-button @click="changeFilter">改变filter</i-button> <i-table width="550" height="200" border :columns="columns2" :data="data4"></i-table>
<span v-if="currentRow !== null">Current Row: {{currentRow.name}}</span> <!--<i-button @click="changeFilter">改变filter</i-button>-->
<Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis <!--<span v-if="currentRow !== null">Current Row: {{currentRow.name}}</span>-->
<i-table <!--<Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis-->
border <!--<i-table-->
:columns="columns6" <!--border-->
width="500" <!--:columns="columns6"-->
:data="[]" <!--width="500"-->
:highlight-row="true" <!--:data="[]"-->
@on-current-change="onCurrentChange" <!--:highlight-row="true"-->
@on-dblclick="onDblclick"> <!--@on-current-change="onCurrentChange"-->
</i-table> <!--@on-dblclick="onDblclick">-->
<!--</i-table>-->
<br/> <!--<br/>-->
<i-table <!--<i-table-->
border <!--border-->
:columns="columns7" <!--:columns="columns7"-->
:data="[]" <!--:data="[]"-->
no-data-text="No Data" <!--no-data-text="No Data"-->
:highlight-row="true" <!--:highlight-row="true"-->
@on-current-change="onCurrentChange" <!--@on-current-change="onCurrentChange"-->
@on-dblclick="onDblclick"> <!--@on-dblclick="onDblclick">-->
</i-table> <!--</i-table>-->
<br/> <!--<br/>-->
<i-table <!--<i-table-->
border <!--border-->
:columns="columns7" <!--:columns="columns7"-->
:data="[]" <!--:data="[]"-->
size="small" <!--size="small"-->
:highlight-row="true" <!--:highlight-row="true"-->
@on-current-change="onCurrentChange" <!--@on-current-change="onCurrentChange"-->
@on-dblclick="onDblclick"> <!--@on-dblclick="onDblclick">-->
</i-table> <!--</i-table>-->
<br/> <!--<br/>-->
<i-table <!--<i-table-->
border <!--border-->
:columns="columns7" <!--:columns="columns7"-->
:data="[]" <!--:data="[]"-->
size="large" <!--size="large"-->
:highlight-row="true" <!--:highlight-row="true"-->
@on-current-change="onCurrentChange" <!--@on-current-change="onCurrentChange"-->
@on-dblclick="onDblclick"> <!--@on-dblclick="onDblclick">-->
</i-table> <!--</i-table>-->
<br/> <!--<br/>-->
<i-table <!--<i-table-->
border <!--border-->
:columns="columns7" <!--:columns="columns7"-->
:data="data5" <!--:data="data5"-->
:highlight-row="true" <!--:highlight-row="true"-->
@on-current-change="onCurrentChange" <!--@on-current-change="onCurrentChange"-->
@on-dblclick="onDblclick"> <!--@on-dblclick="onDblclick">-->
</i-table> <!--</i-table>-->
<br/> <!--<br/>-->
<i-table <!--<i-table-->
border <!--border-->
:columns="columns6" <!--:columns="columns6"-->
width="500" <!--width="500"-->
:data="data5" <!--:data="data5"-->
:highlight-row="true" <!--:highlight-row="true"-->
@on-current-change="onCurrentChange" <!--@on-current-change="onCurrentChange"-->
@on-dblclick="onDblclick"> <!--@on-dblclick="onDblclick">-->
</i-table> <!--</i-table>-->
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
columns2: [
{
title: '姓名',
key: 'name',
width: 100,
fixed: 'left'
},
{
title: '年龄',
key: 'age',
width: 100
},
{
title: '省份',
key: 'province',
width: 100
},
{
title: '市区',
key: 'city',
width: 100
},
{
title: '地址',
key: 'address',
fixed: 'right',
width: 200
},
{
title: '邮编',
key: 'zip',
width: 100
},
{
title: '操作',
key: 'action',
// fixed: 'right',
width: 120,
render () {
return `<i-button type="text" size="small">查看</i-button><i-button type="text" size="small">编辑</i-button>`;
}
}
],
data4: [
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居',
province: '北京市',
city: '朝阳区',
zip: 100000
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗',
province: '北京市',
city: '海淀区',
zip: 100000
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道',
province: '上海市',
city: '浦东新区',
zip: 100000
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道',
province: '广东',
city: '南山区',
zip: 100000
},
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居',
province: '北京市',
city: '朝阳区',
zip: 100000
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗',
province: '北京市',
city: '海淀区',
zip: 100000
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道',
province: '上海市',
city: '浦东新区',
zip: 100000
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道',
province: '广东',
city: '南山区',
zip: 100000
}
],
columns1: [
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age'
},
{
title: '地址',
key: 'address'
}
],
data1: [
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居'
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗'
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道'
}
],
data2: [
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居'
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗'
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道'
},
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居'
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗'
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道'
}
],
columns6: [ columns6: [
{ {
type: 'selection', type: 'selection',