other / mew-iview

Commit 6136e4ddf65e974978004efaeb88d02c4b8dd750

Authored by huanghong
1 parent eed57084

fixed table horizontal scroll bar

Showing 2 changed files with 74 additions and 13 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @6136e4d
1 <template> 1 <template>
2 <div> 2 <div>
3 - <br><br><br><br><br>  
4 - <Table border :show-header='false' :columns="columns1" height="500" :data="data1"></Table> 3 + <!-- <br><br><br><br><br> -->
  4 + <!-- <Table border :show-header='false' :columns="columns1" height="500" :data="data1"></Table> -->
5 <!-- <Table border :columns="columns1" height='300'></Table> --> 5 <!-- <Table border :columns="columns1" height='300'></Table> -->
6 <!-- <br><br><br><br><br> --> 6 <!-- <br><br><br><br><br> -->
7 <!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> --> 7 <!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> -->
@@ -10,18 +10,67 @@ @@ -10,18 +10,67 @@
10 <!-- <br><br><br><br><br> --> 10 <!-- <br><br><br><br><br> -->
11 <!-- <Table border :columns="columns6" :data="data5"></Table> --> 11 <!-- <Table border :columns="columns6" :data="data5"></Table> -->
12 <!-- <br><br><br><br><br> --> 12 <!-- <br><br><br><br><br> -->
13 - <Table border :show-header='false' :columns="columns7" height="200" :data="data7"></Table>  
14 - <Table border :columns="columns7" height="240" :data="data7"></Table> 13 + <!-- <Table border :show-header='false' :columns="columns7" height="200" :data="data7"></Table> -->
  14 + <!-- <Table border :columns="columns7" height="240" :data="data7"></Table> -->
15 <!-- <br><br><br><br><br> --> 15 <!-- <br><br><br><br><br> -->
16 <!-- <Table border :columns="columns8" :data="data7" height="200"></Table> --> 16 <!-- <Table border :columns="columns8" :data="data7" height="200"></Table> -->
17 <!-- <Table border :columns="columns8" height="200"></Table> --> 17 <!-- <Table border :columns="columns8" height="200"></Table> -->
18 - <br><br><br><br><br> 18 + <!-- <br><br><br><br><br> -->
  19 +
  20 + <div class="layout-demo-con">
  21 + <Button @click="change">修改Sider绑定的变量来控制收缩</Button>
  22 + <Layout :style="{minHeight: '80vh'}">
  23 + <Sider
  24 + v-model="isCollapsed"
  25 + collapsed-width="0"
  26 + hide-trigger
  27 + breakpoint="sm"
  28 + @on-collapse="changed"
  29 + collapsible
  30 + ref="side"
  31 + width="200">
  32 + <Menu width="auto" theme="dark" active-name="1">
  33 + <MenuGroup title="内容管理">
  34 + <MenuItem name="1">
  35 + <Icon type="document-text"></Icon>
  36 + 文章管理
  37 + </MenuItem>
  38 + <MenuItem name="2">
  39 + <Icon type="chatbubbles"></Icon>
  40 + 评论管理
  41 + </MenuItem>
  42 + </MenuGroup>
  43 + <MenuGroup title="统计分析">
  44 + <MenuItem name="3">
  45 + <Icon type="heart"></Icon>
  46 + 用户留存
  47 + </MenuItem>
  48 + <MenuItem name="4">
  49 + <Icon type="heart-broken"></Icon>
  50 + 流失用户
  51 + </MenuItem>
  52 + </MenuGroup>
  53 + </Menu>
  54 + <!-- <div slot="trigger"><Icon type="document-text"></Icon></div> -->
  55 + </Sider>
  56 + <Layout class-name="test-class">
  57 + <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
  58 + <Content :style="{background:'#FFCF9E'}">
  59 + <!-- <Table border :columns="columns1" height="500" :data="data1"></Table> -->
  60 + <br>
  61 + <Table border :columns="columns5" :data="data5"></Table>
  62 + </Content>
  63 + <Footer>sdfsdsdfsdfs</Footer>
  64 + </Layout>
  65 + </Layout>
  66 + </div>
19 </div> 67 </div>
20 </template> 68 </template>
21 <script> 69 <script>
22 export default { 70 export default {
23 data () { 71 data () {
24 return { 72 return {
  73 + isCollapsed: false,
25 columns1: [ 74 columns1: [
26 { 75 {
27 title: 'Name', 76 title: 'Name',
@@ -453,6 +502,22 @@ @@ -453,6 +502,22 @@
453 }); 502 });
454 } 503 }
455 this.data1 = data; 504 this.data1 = data;
  505 + },
  506 + methods: {
  507 + toggleCollapse () {
  508 + this.$refs.side.toggleCollapse();
  509 + },
  510 + change () {
  511 + this.isCollapsed = !this.isCollapsed;
  512 + },
  513 + changed (res) {
  514 + console.log(res)
  515 + }
  516 + },
  517 + watch: {
  518 + isCollapsed (val) {
  519 + // console.log(val)
  520 + }
456 } 521 }
457 } 522 }
458 </script> 523 </script>
459 \ No newline at end of file 524 \ No newline at end of file
src/components/table/table.vue
  Show/Hide comments   View file @6136e4d
@@ -566,19 +566,18 @@ @@ -566,19 +566,18 @@
566 const headerHeight = parseInt(getStyle(this.$refs.header, 'height')) || 0; 566 const headerHeight = parseInt(getStyle(this.$refs.header, 'height')) || 0;
567 const footerHeight = parseInt(getStyle(this.$refs.footer, 'height')) || 0; 567 const footerHeight = parseInt(getStyle(this.$refs.footer, 'height')) || 0;
568 this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight; 568 this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
569 - this.fixedBody(); 569 + this.$nextTick(()=>this.fixedBody());
570 }); 570 });
571 } else { 571 } else {
572 this.bodyHeight = 0; 572 this.bodyHeight = 0;
573 - this.fixedBody(); 573 + this.$nextTick(()=>this.fixedBody());
574 } 574 }
575 }, 575 },
576 fixedBody (){ 576 fixedBody (){
577 if (this.$refs.header) { 577 if (this.$refs.header) {
578 this.headerWidth = this.$refs.header.children[0].offsetWidth; 578 this.headerWidth = this.$refs.header.children[0].offsetWidth;
579 this.headerHeight = this.$refs.header.children[0].offsetHeight; 579 this.headerHeight = this.$refs.header.children[0].offsetHeight;
580 - this.showHorizontalScrollBar = this.headerWidth>this.$refs.header.offsetWidth;  
581 - 580 + //this.showHorizontalScrollBar = this.headerWidth>this.$refs.header.offsetWidth;
582 } 581 }
583 582
584 if (!this.$refs.tbody || !this.data || this.data.length === 0) { 583 if (!this.$refs.tbody || !this.data || this.data.length === 0) {
@@ -590,10 +589,7 @@ @@ -590,10 +589,7 @@
590 let bodyContentHeight = bodyContentEl.offsetHeight; 589 let bodyContentHeight = bodyContentEl.offsetHeight;
591 let bodyHeight = bodyEl.offsetHeight; 590 let bodyHeight = bodyEl.offsetHeight;
592 591
593 - if (!this.$refs.header) {  
594 - this.showHorizontalScrollBar = bodyEl.offsetWidth < bodyContentEl.offsetWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);  
595 - }  
596 - 592 + this.showHorizontalScrollBar = bodyEl.offsetWidth < bodyContentEl.offsetWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);
597 this.showVerticalScrollBar = this.bodyHeight? bodyHeight - (this.showHorizontalScrollBar?this.scrollBarWidth:0) < bodyContentHeight : false; 593 this.showVerticalScrollBar = this.bodyHeight? bodyHeight - (this.showHorizontalScrollBar?this.scrollBarWidth:0) < bodyContentHeight : false;
598 594
599 if(this.showVerticalScrollBar){ 595 if(this.showVerticalScrollBar){