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 1 <template>
2 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 5 <!-- <Table border :columns="columns1" height='300'></Table> -->
6 6 <!-- <br><br><br><br><br> -->
7 7 <!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> -->
... ... @@ -10,18 +10,67 @@
10 10 <!-- <br><br><br><br><br> -->
11 11 <!-- <Table border :columns="columns6" :data="data5"></Table> -->
12 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 15 <!-- <br><br><br><br><br> -->
16 16 <!-- <Table border :columns="columns8" :data="data7" height="200"></Table> -->
17 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 67 </div>
20 68 </template>
21 69 <script>
22 70 export default {
23 71 data () {
24 72 return {
  73 + isCollapsed: false,
25 74 columns1: [
26 75 {
27 76 title: 'Name',
... ... @@ -453,6 +502,22 @@
453 502 });
454 503 }
455 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 523 </script>
459 524 \ No newline at end of file
... ...
src/components/table/table.vue
  Show/Hide comments   View file @6136e4d
... ... @@ -566,19 +566,18 @@
566 566 const headerHeight = parseInt(getStyle(this.$refs.header, 'height')) || 0;
567 567 const footerHeight = parseInt(getStyle(this.$refs.footer, 'height')) || 0;
568 568 this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
569   - this.fixedBody();
  569 + this.$nextTick(()=>this.fixedBody());
570 570 });
571 571 } else {
572 572 this.bodyHeight = 0;
573   - this.fixedBody();
  573 + this.$nextTick(()=>this.fixedBody());
574 574 }
575 575 },
576 576 fixedBody (){
577 577 if (this.$refs.header) {
578 578 this.headerWidth = this.$refs.header.children[0].offsetWidth;
579 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 583 if (!this.$refs.tbody || !this.data || this.data.length === 0) {
... ... @@ -590,10 +589,7 @@
590 589 let bodyContentHeight = bodyContentEl.offsetHeight;
591 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 593 this.showVerticalScrollBar = this.bodyHeight? bodyHeight - (this.showHorizontalScrollBar?this.scrollBarWidth:0) < bodyContentHeight : false;
598 594  
599 595 if(this.showVerticalScrollBar){
... ...