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

fixed table horizontal scroll bar

Browse source
This commit is contained in:
huanghong 2018-04-12 01:10:45 +08:00
parent eed5708494
commit 6136e4ddf6
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> <template>
<div> <div>
<br><br><br><br><br> <!-- <br><br><br><br><br> -->
<Table border :show-header='false' :columns="columns1" height="500" :data="data1"></Table> <!-- <Table border :show-header='false' :columns="columns1" height="500" :data="data1"></Table> -->
<!-- <Table border :columns="columns1" height='300'></Table> --> <!-- <Table border :columns="columns1" height='300'></Table> -->
<!-- <br><br><br><br><br> --> <!-- <br><br><br><br><br> -->
<!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> --> <!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> -->
@ -10,18 +10,67 @@
<!-- <br><br><br><br><br> --> <!-- <br><br><br><br><br> -->
<!-- <Table border :columns="columns6" :data="data5"></Table> --> <!-- <Table border :columns="columns6" :data="data5"></Table> -->
<!-- <br><br><br><br><br> --> <!-- <br><br><br><br><br> -->
<Table border :show-header='false' :columns="columns7" height="200" :data="data7"></Table> <!-- <Table border :show-header='false' :columns="columns7" height="200" :data="data7"></Table> -->
<Table border :columns="columns7" height="240" :data="data7"></Table> <!-- <Table border :columns="columns7" height="240" :data="data7"></Table> -->
<!-- <br><br><br><br><br> --> <!-- <br><br><br><br><br> -->
<!-- <Table border :columns="columns8" :data="data7" height="200"></Table> --> <!-- <Table border :columns="columns8" :data="data7" height="200"></Table> -->
<!-- <Table border :columns="columns8" 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> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
isCollapsed: false,
columns1: [ columns1: [
{ {
title: 'Name', title: 'Name',
@ -453,6 +502,22 @@
}); });
} }
this.data1 = data; 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> </script>

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

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