记录一个Ant Design的表格,各列设置宽度值,固定列会多出空白列的问题

问题:

当使用Ant Design表格设置固定列,并且各列都设置固定宽度的时候,当屏幕宽度大于(你设置scroll:{x:xxx})x长度的时候,固定列会多出重复固定列

原因分析

设置固定列的时候是将固定列单独生成一个表格,固定在原表格的上方,将对应原表格的固定列遮住,形成固定效果。当屏幕宽度大于滚动长度也是表格的长度,原表格的固定列就会漏出,形成上图的效果

解决办法

方案一

选中一条非固定列,设置成不固定宽度(也就是将width删除)

注意:如果表头有分组的,要选择非分组列,否则可能将导致表头坍塌

方案二

监听页面的onsize的事件,获取window.innerWidth的,拿innerWidth和scroll的x值比较,如果innerWidth>scroll.x,就设置固定列为fixed,否则就不设置

kotlin 复制代码
....
、、一下为部分代码
import React from 'react';
import {debounce} from "lodash"

class MasterList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      innerWidth:0
    };
    //设置防抖函数
    this.debounceFun=debounce(this.pageWdith,500)
  }

  componentDidMount = () => {
  //初始化宽口的值
    this.setState({
      innerWidth:window.innerWidth
    })
    //监听窗口变化
    window.addEventListener("resize",this.debounceFun)
    this.scrollx=tableScrollTable(this.columns)
  };

  //设置页面宽度
  pageWdith=(e)=>{
    this.setState({
      innerWidth:window.innerWidth
    })
  }
    //取消监听
  componentWillUnmount(){
    window.removeEventListener("resize",this.debounceFun)
  }

  render() {
    // 如果表格的宽度大于屏幕宽度就将最后的2列固定
    if(this.scrollx>this.state.innerWidth){
        this.columns[this.columns.length-1].fixed="right"
        this.columns[this.columns.length-2].fixed="right"
    }else{
        this.columns[this.columns.length-1].fixed=""
        this.columns[this.columns.length-2].fixed=""
    }
....
  }
}

export default Form.create()(MasterList);
相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发7 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码8 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记8 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏8 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript