鍍金池/ 問答/HTML/ element ui table組件寬度能不能自適應(yīng)

element ui table組件寬度能不能自適應(yīng)

最近剛接觸了下餓了么的前端組件庫element-ui，但是剛使用就遇到問題了

主要有兩個不解的問題：

1、在設(shè)置縱向邊框border為TRUE顯示邊框后，當(dāng)沒有加載表格數(shù)據(jù)只有表頭時顯示正常，但當(dāng)加載數(shù)據(jù)后，表格一直抖動而且寬度持續(xù)增加。默認(rèn)fit=true，把fit設(shè)置為false后是不會抖動了，但列不能充滿表格。
圖片描述

2、在使用table組件時，我希望能讓表格寬度隨著窗口寬度自適應(yīng)，但是表格的寬度總是固定為初始化組件后渲染的寬度，當(dāng)窗口最大化后表格的寬度不變化，因為表格寬度已經(jīng)是固定的了
圖片描述

難道是我使用的方法不對嗎？

附上用table的這塊代碼
圖片描述圖片描述

回答
編輯回答
萌面人

你的問題我看了下
你在使用 el-table 前 套 一個 div ,限制寬度樣式 width 100% ，你的抖動就會沒了

clipboard.png

2017年2月9日 22:52
編輯回答
久礙你

我也遇到了這個問題，最后發(fā)現(xiàn)不是table的問題，是中間使用的容器上增加寬度100%就可以了

<template>
 <el-container class="warp-container">

    <!--頭部-->
    <el-header :span="24" style="height: 50px;">
       
    </el-header>

    <el-container style="width:100%;">
      <!--左側(cè)導(dǎo)航-->
      <el-aside :class="{showSidebar:!collapsed}" style="width: auto;">
         
      </el-aside>

      <el-main class="main-container">
        <el-col :span="24" class="content-wrapper">
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </el-col>
      </el-main>
    </el-container>

  </el-container>
</template>
2017年8月12日 21:34
編輯回答
愚念

我今天也遇到了同樣問題
感覺是element-ui在寬度不足的時候用JS自動增加寬度。

下面是比較trick的解決方案，就是寬度不要寫100% =。=
clipboard.png

2017年6月27日 05:29
編輯回答
笨笨噠

換了個舊版本解決了，使用2.0.4的版本一直會抖動，換了個1.4.10的就不會了，不過還是很好奇為什么在你們那不會出現(xiàn)這個問題，難道是我其他樣式影響了嗎

2018年2月5日 13:46
編輯回答
祈歡

看了代碼之后雖然沒有抖動問題，但是整個表格橫向是一樣的顯示不全，主要原因應(yīng)該是在每一列定義的min-width的問題，你先刪除el-table-column中的width或者min-width先看下效果，我們再繼續(xù)討論。

2018年9月21日 09:51