ant table 跟随浏览器缩放
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ant table 跟随浏览器缩放相关的知识,希望对你有一定的参考价值。
参考技术A 表格宽度width设置为100%,然后再定义一个最小宽度值,min-width即可实现。表格说实话,我也不太熟悉。
用的好少的现在。我都用div+css。
Table - Ant Design - 在 Virtual table ant design 中实现过滤器
【中文标题】Table - Ant Design - 在 Virtual table ant design 中实现过滤器【英文标题】:Table - Ant Design - Implement filter in Virtual table ant desgin 【发布时间】:2020-12-04 22:24:58 【问题描述】:在 ant 设计的虚拟表中实现过滤器时遇到了一些麻烦。 当我在列配置上应用过滤器但不起作用时。
有没有人可以解决这个问题?
感谢您阅读本文。
【问题讨论】:
【参考方案1】:是的……
经过 5 个小时的研究,我编写了一些代码来应用它。但我对速度和性能并不满意。
关于虚拟表ant表的代码,请参见:Virtual table - Ant design
//ES6
import React from 'react';
import _ from 'lodash';
import VirtualTable from './virtualTable';
function compareData(filters, record)
return new Promise((resolve, reject) =>
let compared_result = true;
(async () =>
await _.each(filters, (valueFilter, keyFilter) =>
if(valueFilter !== null && valueFilter.length !== 0)
if(compared_result == true)
if(_.indexOf(valueFilter, record[keyFilter]) == -1)
compared_result = false
)
if(compared_result == true)
resolve(record);
else
resolve(undefined)
)();
);
class MoreDataTable extends React.Component
state =
dataSource: [],
dataRaw:[]
constructor(props)
super(props);
this.state.dataSource = props.dataSource;
this.state.dataRaw = props.dataSource;
handleEventChangeTableData = (pagination, filters, sorter, extra) =>
let dataResult = [...this.state.dataRaw];
//adding something like sorter, pagination if you want
(async () =>
if(_.size(filters) > 0)
const result = await _.map(dataResult, record =>
return compareData(filters, record);
)
Promise.all(result).then(value =>
this.setState( dataSource: _.without(value, undefined));
)
)()
render()
const props =
...this.props,
dataSource: this.state.dataSource
return (
<VirtualTable ...props onChange=(pagination, filters, sorter, extra) => this.handleEventChangeTableData(pagination, filters, sorter, extra) />
)
export default MoreDataTable;
使用组件MoreDataTable
<MoreDataTable
dataSource=this.state.dataReport
columns=columns
loading=true />
【讨论】:
以上是关于ant table 跟随浏览器缩放的主要内容,如果未能解决你的问题,请参考以下文章
ant desgin vue 表格table组件在IE浏览器,超出屏幕宽度,不折叠