drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2 from huanghong1125/iss3124

Browse source 
Iss3124
This commit is contained in:
huanghong 2018-03-20 19:38:07 +08:00 • committed by GitHub
commit 8744e122ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 155 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
examples/routers/table.vue
View file

@ -5,7 +5,12 @@
<Button @click="handleClearData">Clear Data</Button>
<Button @click="handleSelectAll(true)">Set all selected</Button>
<Button @click="handleSelectAll(false)">Cancel all selected</Button>
<div style='margin:20px 0px'>
<Table border :columns="columns2" :data="data3"></Table>
</div>
<div style='margin:20px 0px'>
<Table :height='200' border :columns="columns2" :data="data3"></Table>
</div>
<div style='margin:20px 0px;'>
<Table :data="tableData1" :columns="tableColumns1" :height='500' stripe size='small'></Table>
<div style="margin: 10px;overflow: hidden">
@ -14,6 +19,7 @@
</div>
</div>
</div>
</div>
</template>
<script>
@ -49,6 +55,95 @@
data1: [
],
columns2: [
{
title: 'Name',
key: 'name',
width: 100,
fixed: 'left'
},
{
title: 'Age',
key: 'age',
width: 100
},
{
title: 'Province',
key: 'province',
width: 100
},
{
title: 'City',
key: 'city',
width: 100
},
{
title: 'Address',
key: 'address',
width: 200
},
{
title: 'Postcode',
key: 'zip',
width: 100
},
{
title: 'Action',
key: 'action',
fixed: 'right',
width: 120,
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'text',
size: 'small'
}
}, 'View'),
h('Button', {
props: {
type: 'text',
size: 'small'
}
}, 'Edit')
]);
}
}
],
data3: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
province: 'America',
city: 'New York',
zip: 100000
},
{
name: 'Jim Green',
age: 24,
address: 'Washington, D.C. No. 1 Lake Park',
province: 'America',
city: 'Washington, D.C.',
zip: 100000
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
province: 'Australian',
city: 'Sydney',
zip: 100000
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
province: 'Canada',
city: 'Ottawa',
zip: 100000
}
],
tableData1: [],
tableColumns1: [

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

@ -31,7 +31,7 @@ export default {
width += scrollBarWidth;
}
// when fixed type,reset first right fixed column's width
if (this.fixed === 'right') {
if (this.fixed === 'right' && top ) {
const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
if (firstFixedIndex === index) {
let scrollBarWidth = this.$parent.scrollBarWidth;

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

@ -23,12 +23,12 @@
:obj-data="objData"></table-body>
</div>
<div
:class="[prefixCls + '-tip']"
:class="[prefixCls + '-tip']" :style="bodyStyle" @scroll="handleBodyScroll"
v-show="((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td :style="{ 'height': bodyStyle.height }">
<td :style="{'height':bodyStyle.height,'width':`${this.headerWidth}px`}">
<span v-html="localeNoDataText" v-if="!data || data.length === 0"></span>
<span v-html="localeNoFilteredDataText" v-else></span>
</td>
@ -188,6 +188,8 @@
currentContext: this.context,
cloneData: deepCopy(this.data), // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data
showVerticalScrollBar:false,
showHorizontalScrollBar:false,
headerWidth:0
};
},
computed: {
@ -253,7 +255,7 @@
if (this.bodyHeight > this.bodyRealHeight) {
width = this.tableWidth;
} else {
width = this.tableWidth - this.scrollBarWidth;
width = this.tableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
}
}
// const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth;
@ -276,8 +278,9 @@
this.rightFixedColumns.forEach((col) => {
if (col.fixed && col.fixed === 'right') width += col._width;
});
width += this.scrollBarWidth;
//width += this.scrollBarWidth;
style.width = `${width}px`;
style.right = `${this.showVerticalScrollBar?this.scrollBarWidth:0}px`;
return style;
},
bodyStyle () {
@ -292,11 +295,11 @@
fixedBodyStyle () {
let style = {};
if (this.bodyHeight !== 0) {
let height = this.bodyHeight + this.scrollBarWidth - 1;
let height = this.bodyHeight + (!this.showHorizontalScrollBar?this.scrollBarWidth:0) - 1;
// #2102 里，如果 Table 没有设置 width，而是集成父级的 width，固定列也应该不包含滚动条高度，所以这里直接计算表格宽度
const tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
if ((this.width && this.width < this.tableWidth) || tableWidth < this.tableWidth){
if ((this.width && this.width < this.tableWidth) || tableWidth < this.tableWidth+(this.showVerticalScrollBar?this.scrollBarWidth:0)){
height = this.bodyHeight;
}
// style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`;
@ -348,7 +351,13 @@
this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
}
this.columnsWidth = {};
if (!this.$refs.tbody) return;
this.$nextTick(()=>{
this.headerWidth = this.$refs.header.childNodes[0].offsetWidth;
if (!this.$refs.tbody) {
this.showVerticalScrollBar = false;
return;
}
});
this.$nextTick(() => {
let columnsWidth = {};
let autoWidthIndex = -1;
@ -358,7 +367,6 @@
const $tr = this.$refs.tbody.$el.querySelectorAll('tbody tr');
if ($tr.length === 0) return;
const $td = $tr[0].children;
for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox
const column = this.cloneColumns[i];
@ -375,23 +383,36 @@
};
}
this.columnsWidth = columnsWidth;
this.fixedHeader();
this.$nextTick(()=>{
this.fixedHeader();
if (this.$refs.tbody) {
let bodyContentEl = this.$refs.tbody.$el;
let bodyEl = bodyContentEl.parentElement;
let bodyContentHeight = bodyContentEl.offsetHeight;
let bodyContentWidth = bodyContentEl.offsetWidth;
let bodyWidth = bodyEl.offsetWidth;
let bodyHeight = bodyEl.offsetHeight;
let scrollBarWidth = 0;
if (bodyWidth < bodyContentWidth + (bodyHeight<bodyContentHeight?this.scrollBarWidth : 0)) {
scrollBarWidth = this.scrollBarWidth;
}
this.showVerticalScrollBar = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;
this.showHorizontalScrollBar = bodyWidth < bodyContentWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);
if(this.showVerticalScrollBar){
bodyEl.classList.add(this.prefixCls +'-overflowY');
}else{
bodyEl.classList.remove(this.prefixCls +'-overflowY');
}
if(this.showHorizontalScrollBar){
bodyEl.classList.add(this.prefixCls +'-overflowX');
}else{
bodyEl.classList.remove(this.prefixCls +'-overflowX');
}
if (this.$refs.tbody) {
let bodyContentEl = this.$refs.tbody.$el;
let bodyEl = bodyContentEl.parentElement;
bodyEl.className = '';
this.$nextTick(() => { bodyEl.className = this.prefixCls + '-body'; });
let bodyContentHeight = bodyContentEl.offsetHeight;
let bodyContentWidth = bodyContentEl.offsetWidth;
let bodyWidth = bodyEl.offsetWidth;
let bodyHeight = bodyEl.offsetHeight;
let scrollBarWidth = 0;
if (bodyWidth < bodyContentWidth) {
scrollBarWidth = this.scrollBarWidth;
}
this.showVerticalScrollBar = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;
}
});
}
});
// get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth

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

@ -71,7 +71,19 @@
overflow: hidden;
}
&-body{
overflow: auto;
//overflow: auto;
//position: relative;
}
&-overflowX{
overflow-x: scroll;
}
&-overflowY{
overflow-y: scroll;
}
&-tip{
overflow-x: auto;
overflow-y: hidden;
//position: relative;
}
@ -273,7 +285,7 @@
box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
}
&-fixed-header{
overflow: hidden;
overflow: visible;
&-with-empty{
.@{table-prefix-cls}-hidden{
.@{table-prefix-cls}-sort{