记录一个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);
相关推荐
前端小小王26 分钟前
React Hooks
前端·javascript·react.js
迷途小码农零零发36 分钟前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀1 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪1 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef3 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6413 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻4 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云4 小时前
npm淘宝镜像
前端·npm·node.js
dz88i84 小时前
修改npm镜像源
前端·npm·node.js
Jiaberrr4 小时前
解锁 GitBook 的奥秘:从入门到精通之旅
前端·gitbook