目录:

  1. 版本说明
  2. 问题
  3. 问题分析
  4. 解决办法

一、版本说明

"ant-design-vue":  "^1.3.5"

二、问题描述如下

2.1、按照官网设置过以下属性值,发现可以滚动,但是与内容错位啦

:scroll="{x: 1200, y: 720}"

三、原因分析:

3.1、查看官方文档,这里,发现文档的提示如下:

若列头与内容不对齐或出现列重复,请指定固定列的宽度 width
如果指定 width 不生效或出现白色垂直空隙, 请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局。
建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 scroll.x

四、解决办法:

4.1、研究一番,主要修改注意点⚠️如下:

1. 设置一个固定值 `scroll.y`  
2. 留一列不设置宽度,用于自适应,其他列都需要设置宽度
3. 保证所有宽度(包含自适应的)加起来,需要小于 `scroll.x`   

4.2、具体内容如下,根据项目实际修改:

<a-table
    :scroll="{x: scrollXWidth, y: 720}"
    bordered
    size="middle"
    rowKey="id"
    :columns="columns"
    ...
    ...
    ...
    >
</a-table>


<script>
    
    ...
    
    data() {
        return {
            scrollXWidth: 1200,
            columns:[]
        }
    },
    ...
    mounted() {
        this.getData();
    },
    methods() {
        // 获取当前表单属性值、数据值等
        getData() {
            ...
            
            let currColumns = res.result.columns
            // res.result.columns表示接口获取的columns值,具体根据接口返回值修改
            
            for(let a=0;a<currColumns.length;a++){
              // 设置除最后一列的宽度,需要空一列自适应
              if(a < currColumns.length-1) {
                currColumns[a].width = 150;
              }
            }
            console.log("-------------------",currColumns)
            // 横向滚动长度大于所有宽度,才能实现固定表头
            this.scrollXWidth = (currColumns.length) * 150 + 180;
            this.columns = [...currColumns]
            
            ...
        }
    }
    
    ...
</script>

4.3、注意⚠:️上述修改后,可能仍有问题,在组件中增加此css样式,具体看是否是这个class属性名

.ant-table-scroll {
    word-break: break-all;
}
写给自己的随笔,有问题欢迎指出
Logo

前往低代码交流专区

更多推荐