前端vue开发后台项目经常会使用element-ui组件,估计el-table组件算是其中使用率相当高的了,在这其中有时候就会出现表格列偏移的问题,尤其是列较长表格设置表头或者表尾列固定时

经过测试,发现设置使用 :min-width 属性可以解决这个问题

 但之后发现有时候使用了该属性还会出现偏移问题,又又 经过测试,发现动态调节 :min-width 的数值,可以解决这个问题,确实有效,但是这个数值比例没研究出来,只能是所有列动态增减玄学调整,根据偏移的尺度来找感觉.....

举个我调节好的橡木栗子吧:

<el-table :data="dataForm.storageDataList"
                    border
                    v-loading="storageListLoading"
                    style="top:10px;">
            <el-table-column prop="locationName"
                             label="位置名称"
                             header-align="center"
                             min-width="180px"
                             align="center">
              <template slot-scope="scope">{{
                scope.row.locationName
                  | replaceLocationFilter(scope.row, roadList)
              }}</template>
            </el-table-column>
            <el-table-column prop="storageArea"
                             header-align="center"
                             align="center"
                             min-width="120px"
                             label="面积(㎡)">
            </el-table-column>
            <el-table-column header-align="center"
                             align="center"
                             min-width="40px"
                             label="操作">
              <template slot-scope="scope">
                <el-button @click="storageIndoDiv(scope.row.id)"
                           size="small"
                           type="text">详情</el-button>
              </template>
            </el-table-column>
          </el-table>

 

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐