element ui + vue 使用table最后一列错位求解决

最新推荐文章于 2024-07-17 21:45:00 发布

知所云

最新推荐文章于 2024-07-17 21:45:00 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/qq_32881447/article/details/107565045

版权

在使用 Element UI 的 Table 组件时，遇到一个问题：当表格内部嵌套一个表格并出现滚动条时，滚动操作导致错位。错位的宽度固定，不仅影响最后一列，设置列宽小于特定值后，倒数第二列也会出现同样问题。附带了页面截图以展示具体现象。

摘要由CSDN通过智能技术生成

1、table 里面嵌了一个table，内嵌的table内容超过后出现滚动条，但是滚动的时候分成了两部分滚动，出现错位

<el-table
        :data="list"
        stripe
        border
        size="small"
        :height="tableHeight"
        v-loading="loading"
        element-loading-text="拼命加载中"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        @expand-change="expandChange"
      >
        <el-table-column align="center" prop="vehPlate" label="车牌号" min-width="80"></el-table-column>
        <el-table-column align="center" prop="vehPlateColorName" label="车牌颜色" min-width="60"></el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="80" type="expand">
          <template slot-scope="scope"   v-loading.fullscreen.lock="loading">
            <tableList  :tableData="scope.row.child" @getListInfo="getListInfo" ></tableList>
          </template>
        </el-table-column>
      </el-table>

// tableList的内容
  <el-table
      :data="list"
      style="width: 98%;margin:0 auto 0;"
      stripe
      border
      size="small"
      :max-height="tableHeight">
        <el-table-column align="center" prop="gantryName" label="门架名称" min-width="110"></el-table-column>
      <el-table-column  align="center" label="操作" width="80">
        <template slot-scope="scope">
          <el-button type="text"
              @click="$emit('getListInfo',scope.row)"
          >详情</el-button>
        </template>
      </el-table-column>
      <el-table-column width="40" style="display: none"></el-table-column>
    </el-table>

页面图片：
图片说明
这个错位的大小好像是固定的这个大小，本来以为最后一列才会出现这个问题，最后一列设置大小小于这个位置大小后，倒数第二例也会出现错位