update Table
update Table
This commit is contained in:
梁灏
parent
f23d6ba1ac
commit
3d6fa54b39
5 changed files with 288 additions and 74 deletions
|
|
@ -11,15 +11,22 @@ export default {
|
|||
isPopperShow (column) {
|
||||
return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
|
||||
},
|
||||
setCellWidth (column) {
|
||||
// return column.width ? column.width : this.columnsWidth[index];
|
||||
setCellWidth (column, index, top) {
|
||||
let width = '';
|
||||
if (column.width) {
|
||||
width = column.width;
|
||||
} else if (this.columnsWidth[column._index]) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<table cellspacing="0" cellpadding="0" border="0" :style="style">
|
||||
<colgroup>
|
||||
<col v-for="column in columns" :width="setCellWidth(column, $index)">
|
||||
<col v-for="column in columns" :width="setCellWidth(column, $index, false)">
|
||||
</colgroup>
|
||||
<tbody :class="[prefixCls + '-tbody']">
|
||||
<tr
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<table cellspacing="0" cellpadding="0" border="0" :style="style">
|
||||
<colgroup>
|
||||
<col v-for="column in columns" :width="setCellWidth(column, $index)">
|
||||
<col v-for="column in columns" :width="setCellWidth(column, $index, true)">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
<script>
|
||||
import tableHead from './table-head.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 ExportCsv from './export-csv';
|
||||
const prefixCls = 'ivu-table';
|
||||
|
|
@ -143,11 +143,11 @@
|
|||
},
|
||||
noDataText: {
|
||||
type: String,
|
||||
default: '无数据'
|
||||
default: '暂无数据'
|
||||
},
|
||||
noFilteredDataText: {
|
||||
type: String,
|
||||
default: '无筛选结果'
|
||||
default: '暂无筛选结果'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -162,7 +162,8 @@
|
|||
cloneColumns: this.makeColumns(),
|
||||
showSlotHeader: true,
|
||||
showSlotFooter: true,
|
||||
bodyHeight: 0
|
||||
bodyHeight: 0,
|
||||
scrollBarWidth: getScrollBarSize()
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -189,13 +190,19 @@
|
|||
},
|
||||
styles () {
|
||||
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`;
|
||||
return style;
|
||||
},
|
||||
tableStyle () {
|
||||
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;
|
||||
},
|
||||
fixedTableStyle () {
|
||||
|
|
@ -213,17 +220,24 @@
|
|||
this.rightFixedColumns.forEach((col) => {
|
||||
if (col.fixed && col.fixed === 'right') width += col._width;
|
||||
});
|
||||
width += this.scrollBarWidth;
|
||||
style.width = `${width}px`;
|
||||
return style;
|
||||
},
|
||||
bodyStyle () {
|
||||
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;
|
||||
},
|
||||
fixedBodyStyle () {
|
||||
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;
|
||||
},
|
||||
leftFixedColumns () {
|
||||
|
|
|
|||
|
|
@ -1,80 +1,273 @@
|
|||
<style>
|
||||
body{
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<i-button @click="changeFilter">改变filter</i-button>
|
||||
<span v-if="currentRow !== null">Current Row: {{currentRow.name}}</span>
|
||||
<Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis
|
||||
<i-table
|
||||
border
|
||||
:columns="columns6"
|
||||
width="500"
|
||||
:data="[]"
|
||||
:highlight-row="true"
|
||||
@on-current-change="onCurrentChange"
|
||||
@on-dblclick="onDblclick">
|
||||
</i-table>
|
||||
<i-table width="550" height="200" border :columns="columns2" :data="data4"></i-table>
|
||||
<!--<i-button @click="changeFilter">改变filter</i-button>-->
|
||||
<!--<span v-if="currentRow !== null">Current Row: {{currentRow.name}}</span>-->
|
||||
<!--<Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis-->
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns6"-->
|
||||
<!--width="500"-->
|
||||
<!--:data="[]"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
|
||||
<br/>
|
||||
<!--<br/>-->
|
||||
|
||||
<i-table
|
||||
border
|
||||
:columns="columns7"
|
||||
:data="[]"
|
||||
no-data-text="No Data"
|
||||
:highlight-row="true"
|
||||
@on-current-change="onCurrentChange"
|
||||
@on-dblclick="onDblclick">
|
||||
</i-table>
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns7"-->
|
||||
<!--:data="[]"-->
|
||||
<!--no-data-text="No Data"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
|
||||
<br/>
|
||||
<!--<br/>-->
|
||||
|
||||
<i-table
|
||||
border
|
||||
:columns="columns7"
|
||||
:data="[]"
|
||||
size="small"
|
||||
:highlight-row="true"
|
||||
@on-current-change="onCurrentChange"
|
||||
@on-dblclick="onDblclick">
|
||||
</i-table>
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns7"-->
|
||||
<!--:data="[]"-->
|
||||
<!--size="small"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
|
||||
<br/>
|
||||
<!--<br/>-->
|
||||
|
||||
<i-table
|
||||
border
|
||||
:columns="columns7"
|
||||
:data="[]"
|
||||
size="large"
|
||||
:highlight-row="true"
|
||||
@on-current-change="onCurrentChange"
|
||||
@on-dblclick="onDblclick">
|
||||
</i-table>
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns7"-->
|
||||
<!--:data="[]"-->
|
||||
<!--size="large"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
|
||||
<br/>
|
||||
<!--<br/>-->
|
||||
|
||||
<i-table
|
||||
border
|
||||
:columns="columns7"
|
||||
:data="data5"
|
||||
:highlight-row="true"
|
||||
@on-current-change="onCurrentChange"
|
||||
@on-dblclick="onDblclick">
|
||||
</i-table>
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns7"-->
|
||||
<!--:data="data5"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
|
||||
<br/>
|
||||
<!--<br/>-->
|
||||
|
||||
<i-table
|
||||
border
|
||||
:columns="columns6"
|
||||
width="500"
|
||||
:data="data5"
|
||||
:highlight-row="true"
|
||||
@on-current-change="onCurrentChange"
|
||||
@on-dblclick="onDblclick">
|
||||
</i-table>
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns6"-->
|
||||
<!--width="500"-->
|
||||
<!--:data="data5"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
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: [
|
||||
{
|
||||
type: 'selection',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue