背景

table 大致布局如下：

  <div class="rate-column">
                <div class="item1"></div>
                <div  class="item2"></div>
                <div  class="item3">
                   <el-table:data="tableData" style="width: 100%">
                     <el-table-column min-width="40">
                      <template #default="{ $index }">
                       <BaseSvgIcon v-if="$index === 0" :symbol-id="'golden'" />
                      </template>
                    </el-table-column>
                   </el-table>
                </div>
            </div>

----scss-------
.rate-column{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    .item1,.item2{
        flex:1
    }
    .item3{
        flex:2
    }
}

問題

拖動(dòng)窗口的時(shí)候，table 只能自適應(yīng)變大，不能自適應(yīng)變小，導(dǎo)致item1和item2 被擠壓

嘗試解決一

網(wǎng)上的解決方案，意思給item3（表格的父元素） 添加以下樣式：

overflow-x: hidden;

即可解決。嘗試結(jié)果如下圖：

失敗

嘗試解決二

給 item3 同級(jí)的所有flex 元素（即item1,item2,item3） 加overflow-x: hidden;屬性，結(jié)果如下圖：

成功

最終添加的css 樣式：

.rate-column{
       > div {
         overflow-x: hidden;
      }
}

pppps:問題二

發(fā)現(xiàn)個(gè)小問題，上圖中table第一列里面的圖片旁邊會(huì)出來點(diǎn)點(diǎn)，一開始只是一個(gè)，縮放后發(fā)現(xiàn)是省略號(hào)，仔細(xì)排查后發(fā)現(xiàn).el-table .el-table__cell 的樣式是默認(rèn)超長省略的：

省略號(hào)

所以應(yīng)該是第一列的寬度不夠了，加寬點(diǎn)就好啦。