AVUE表单切换标签页错位问题

qq_35740440

于 2024-08-23 14:47:16 发布

阅读量405

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_35740440/article/details/141464784

版权

开发中遇到一个问题，如果设置了有些冻结列（固定列）avue框架写的avue-crud在页面标签切换之后发现表格错位，如图：

解决方法：

在activated方法里refreshTable()这个curd或者doLayout().。缺点：每次进入会明显看到刷新一下跳一下
```
activated() {
   this.$nextTick(() => {
      this.$refs.crud.refreshTable()
    })
  },
```

在activated方法里获取到表头的高度再复制给fix部分的top。缺点：因每次active设置top所以窗口大小改变不会改变固定列的位置还是会错位

activated() {
    await this.getallData()
    if (document.getElementsByClassName('el-table__fixed-header-wrapper')[0].offsetHeight) {
      this.listHeight = document.getElementsByClassName('el-table__fixed-header-wrapper')[0].offsetHeight + 'PX'
      document.documentElement.style.setProperty('--fixed-left-top', this.listHeight)
    }
   
  },
//css
.el-table__fixed-body-wrapper {
   top:var(--fixed-left-top,"40PX") !important;
}

终极解决办法：avue的option里的column全部设置width或者minwidth就好了

           //xml 
            
<avue-crud
                            :data="reportShowList"
                            :option="reportOption"
                            :page.sync="query"
                            @current-change="currentChange"
                            @size-change="sizeChange">
                            <template slot="caozuo" slot-scope="scope">
                                <div style="display: flex; justify-content: center;">
                                    <el-button size="small" icon="el-icon-edit" @click="editType(scope)" >{{ $t('编辑') }}</el-button>
                                    <el-button size="small" icon="el-icon-delete" @click="deleteType(scope)">{{ $t('删除') }}</el-button>
                                </div>
                            </template>

                        </avue-crud>
//data
 reportOption: {
        height: this.tableheight,
        border: true,
        headerAlign: 'center',
        align: 'center',

        header: false,
        stripe: true,
        addBtn: false,
        index: true,
        menu: false,
        indexLabel: '序号',
        indexWidth: 100,
        column: [
          {
            label: '名称',
            prop: 'name',
            // width: 180,
            minWidth: 460,
            fixed: true
          },

          {
            label: '组件顺序',
            minWidth: 460,
            prop: 'contentZh'
          },

          {
            label: '最后更新时间',
            minWidth: 460,
            // width: 180,
            prop: 'updateTime'
          },
          {
            label: '操作',
            minWidth: 460,
            // width: 180,
            prop: 'caozuo'
          }
        ]
      },