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

Merge pull request #3358 from huanghong1125/table

Browse source 
fixed table horizontal scroll bar
This commit is contained in:
Aresn 2018-04-12 10:35:07 +08:00 • committed by GitHub
commit 75abb3bb28
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 74 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
examples/routers/table.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<br><br><br><br><br>
<Table border :show-header='false' :columns="columns1" height="500" :data="data1"></Table>
<!-- <br><br><br><br><br> -->
<!-- <Table border :show-header='false' :columns="columns1" height="500" :data="data1"></Table> -->
<!-- <Table border :columns="columns1" height='300'></Table> -->
<!-- <br><br><br><br><br> -->
<!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> -->
@ -10,18 +10,67 @@
<!-- <br><br><br><br><br> -->
<!-- <Table border :columns="columns6" :data="data5"></Table> -->
<!-- <br><br><br><br><br> -->
<Table border :show-header='false' :columns="columns7" height="200" :data="data7"></Table>
<Table border :columns="columns7" height="240" :data="data7"></Table>
<!-- <Table border :show-header='false' :columns="columns7" height="200" :data="data7"></Table> -->
<!-- <Table border :columns="columns7" height="240" :data="data7"></Table> -->
<!-- <br><br><br><br><br> -->
<!-- <Table border :columns="columns8" :data="data7" height="200"></Table> -->
<!-- <Table border :columns="columns8" height="200"></Table> -->
<br><br><br><br><br>
<!-- <br><br><br><br><br> -->
<div class="layout-demo-con">
<Button @click="change">修改Sider绑定的变量来控制收缩</Button>
<Layout :style="{minHeight: '80vh'}">
<Sider
v-model="isCollapsed"
collapsed-width="0"
hide-trigger
breakpoint="sm"
@on-collapse="changed"
collapsible
ref="side"
width="200">
<Menu width="auto" theme="dark" active-name="1">
<MenuGroup title="内容管理">
<MenuItem name="1">
<Icon type="document-text"></Icon>
文章管理
</MenuItem>
<MenuItem name="2">
<Icon type="chatbubbles"></Icon>
评论管理
</MenuItem>
</MenuGroup>
<MenuGroup title="统计分析">
<MenuItem name="3">
<Icon type="heart"></Icon>
用户留存
</MenuItem>
<MenuItem name="4">
<Icon type="heart-broken"></Icon>
流失用户
</MenuItem>
</MenuGroup>
</Menu>
<!-- <div slot="trigger"><Icon type="document-text"></Icon></div> -->
</Sider>
<Layout class-name="test-class">
<Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
<Content :style="{background:'#FFCF9E'}">
<!-- <Table border :columns="columns1" height="500" :data="data1"></Table> -->
<br>
<Table border :columns="columns5" :data="data5"></Table>
</Content>
<Footer>sdfsdsdfsdfs</Footer>
</Layout>
</Layout>
</div>
</div>
</template>
<script>
export default {
data () {
return {
isCollapsed: false,
columns1: [
{
title: 'Name',
@ -453,6 +502,22 @@
});
}
this.data1 = data;
},
methods: {
toggleCollapse () {
this.$refs.side.toggleCollapse();
},
change () {
this.isCollapsed = !this.isCollapsed;
},
changed (res) {
console.log(res)
}
},
watch: {
isCollapsed (val) {
// console.log(val)
}
}
}
</script>

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

@ -566,19 +566,18 @@
const headerHeight = parseInt(getStyle(this.$refs.header, 'height')) || 0;
const footerHeight = parseInt(getStyle(this.$refs.footer, 'height')) || 0;
this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
this.fixedBody();
this.$nextTick(()=>this.fixedBody());
});
} else {
this.bodyHeight = 0;
this.fixedBody();
this.$nextTick(()=>this.fixedBody());
}
},
fixedBody (){
if (this.$refs.header) {
this.headerWidth = this.$refs.header.children[0].offsetWidth;
this.headerHeight = this.$refs.header.children[0].offsetHeight;
this.showHorizontalScrollBar = this.headerWidth>this.$refs.header.offsetWidth;
//this.showHorizontalScrollBar = this.headerWidth>this.$refs.header.offsetWidth;
}
if (!this.$refs.tbody || !this.data || this.data.length === 0) {
@ -590,10 +589,7 @@
let bodyContentHeight = bodyContentEl.offsetHeight;
let bodyHeight = bodyEl.offsetHeight;
if (!this.$refs.header) {
this.showHorizontalScrollBar = bodyEl.offsetWidth < bodyContentEl.offsetWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);
}
this.showHorizontalScrollBar = bodyEl.offsetWidth < bodyContentEl.offsetWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);
this.showVerticalScrollBar = this.bodyHeight? bodyHeight - (this.showHorizontalScrollBar?this.scrollBarWidth:0) < bodyContentHeight : false;
if(this.showVerticalScrollBar){