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

肥肥的小二猪2024-02-05 17:22

问题：

当使用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);