平台使用的表格组件是vue element-ui的table组件,因为列表展示字段较多,内容较长,所以设置了几个搜索项固定在表格前几列,操作项固定在最后,中间其它项可拖动,结果导致了表格的拖动项与非拖动项之间的错位问题,如图:

 

 前端样式方面还不太熟,找的公司同事帮忙调整,添加了样式,解决了问题,特此记录:

table标签:

<el-table ref="listTable"
                :data="dataList"
                @selection-change="dataListSelectionChangeHandle"
                @sort-change="dataListSortChangeHandle"
                stripe
                highlight-current-row
                border
                style="width: 100%"
                class="afterjustify"
                v-loading="dataListLoading">

样式:

<style lang="css">
/*修改子页面样式*/
.afterjustify .el-table__fixed-body-wrapper {
  top: 48px !important;
}
</style>

效果:

Logo

前往低代码交流专区

更多推荐