element中el-table单元格x轴出现却不滚动的原因

最新推荐文章于 2025-04-27 10:33:25 发布

原创最新推荐文章于 2025-04-27 10:33:25 发布 · 413 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

写项目遇到一个需求就是一个单元格内会放入多张图片，需要让x轴滚动方便查看一定宽高的图片

vue2配套的element不能使用<el-scrollBar></el-scrollBar>标签，vue3可以，所以只能使用overflow-x，但是设置了overflow-x：scroll之后，x轴出现，但是没有发生滚动的情况，下面是我的解决方案

//关键在于包裹图片的小div的宽和高，这里我给tableImgContent设置了最小宽度就解决了
//若不设置最小宽度，tableImgContent的大小就会随着加入图片的增多或者父元素tableImgBox
//的变化而被挤压从而变化宽高，出现有x轴滚动条但是却不会滚动的情况。

<el-table
    :data="tableData"
    border
    height="2rem"
    style="width: 80%">
    <el-table-column
      prop="a"
      label="A"
       align="center"
      width="180">
    </el-table-column>
    <el-table-column
      prop="isShow"
      label="是否出现"
       align="center"
      width="180">
    </el-table-column>
    <el-table-column
      prop="img"
      label="图片"
       align="center"
      >
      <template slot-scope="scope">
        
          <div class="tableImgBox">

            <div v-for="(item,index) in scope.row.img" :key="index" class="tableImgContent">
              <img :src="item" alt="">
            </div> 
          </div>
    </template>
    </el-table-column>
  </el-table>

//css部分
.tableImgBox {
  height: 50px;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden; /* 隐藏纵向滚动条 */
  .tableImgContent {
    /* 每个图片容器的最小宽度 */
    min-width: 0.3rem; 
    height: 50px; 
    img {
/*使其能完全适应父元素的大小*/
      width: 100%;
      height: 100%;
    }

  }
}