iview的表格组件宽度自适应问题

processDry
  • 111

clipboard.png

缩小浏览器宽度,表格不会自适应,导致出现滚动条。
增加浏览器宽度,表格会自适应,
但是iview的官网是可以做到自适应的,是哪个css样式覆盖掉了吗,应该怎么解决

回复
阅读 32.2k
6 个回答

html:

<Table :columns="columns" :data="data" class="table" />

css

  .table table{
    // table-layout: auto; 
    width: 100% !important;
  }

不要给列设置width属性就可以了

在这个table标签外边加一个div标签或者其它的什么,然后给这个div增加一个百分比宽度。这个时候,这个table就会百分百充满这个div标签。

刚好也遇到了这个问题,我说说我的情况和解决方法,供大家参考:
html代码如下:

  <div id="app">
    <div class="menu">
      <div class="left">left</div>
      <div class="right">
        <div class="container">
          <div class="content">
            <p>content</p>
            <i-table border :columns="columnsAsset" :data="assetList"></i-table>
          </div>
        </div>
      </div>
    </div>
  </div>

css:

  <style>
    .menu {
      display: flex;
    }

    .left {
      position: fixed;
      width: 60px;
      background-color: #60729F;
      height: 100vh;
    }

    .right {
      margin-left: 60px;
      flex-grow: 1;
      /*overflow: auto;*/
    }
    .container {
      display: flex;
      border: solid 1px red;
    }
    .content {
      border: solid 1px blue;
      width: 100%;
    }
  </style>

js:

  <script>
    new Vue({
      el: '#app',
      data: {
        columnsAsset: [
          {
            title: 'ID',
            key: 'id'
          },
          {
            title: '姓名',
            key: 'name'
          },
        ],
        assetList: [
          {id: 1, name: 'a'},
          {id: 2, name: 'b'}
        ]
      }
    })
  </script>

对于我这种情况来说,起决定性因素的是.right中的overflow: auto;这行代码,如果注释掉,就会出现表格宽度不能自适应的情况。

xieyhgithub
  • 2
新手上路,请多包涵

我今天也碰到了这个问题,最后发现是它外层元素导致的,具体是什么元素可能要看布局的样式设置了,我是因为用最顶层的有个div没有设置overflow:hidden导致了Table组件无法自适应宽度,加上就好了

Zzhiren
  • 4
新手上路,请多包涵

228px是除了表格宽度外其他所有元素在横向上的宽度,就是窗口宽度减去其他元素的宽度,剩余的就是表格宽度

clipboard.png

你知道吗?

宣传栏