本文介绍了Ant Design for React:显示/隐藏特定列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要一些帮助，在 Ant Design 表中，我需要根据状态值隐藏/显示表的特定列.在给定的沙箱链接中，我需要在开关关闭时隐藏姓氏列，并在开关打开时显示.
请某人调查一下并帮助我.
参考:https://codesandbox.io/s/Purple-sun-1rtz1?file=/index.js
解决方案
有一个工作代码，但应该根据您的需要进行更多的定制、交互和重构:
//也可以修改`handleChnage`中的数据//或者像这里有条件地显示它:class EditableTable 扩展 React.Component {状态 = {姓氏显示:假};构造函数(道具){超级(道具)；this.columns = [{标题:姓名"，数据索引:名称"，宽度:30%"},{title: 《姓氏》,数据索引:姓氏"，宽度:30%"}];this.state = {数据源: [{键:0"，名称:爱德华一号"，姓氏:王一"},{键:1"，名称:爱德华2"，姓氏:《王2》}]};}handleChnage = 键 =>{this.setState({ surNameShow: !this.state.surNameShow }, () => {console.log(this.state.surNameShow);});};使成为() {const { 数据源 } = this.state;const 列 = this.columns;返回 (<div><p className=mr-3">显示姓氏</p><开关 onChange={() =>this.handleChnage()}/><表有边框的数据源={数据源}列={this.state.surNameShow?列: columns.filter(ea => ea.dataIndex !== 姓氏")}分页={假}/>
);}}ReactDOM.render(, document.getElementById(container"));
I need a bit of help here, In an Ant Design table, I need to hide/show a particular column of a table depending on a state value. In the given sandbox link, I need to hide the surname column whenever the switch is Off and show when the switch is On.
Please, someone, look into this, and help me out.
Reference: https://codesandbox.io/s/purple-sun-1rtz1?file=/index.js
解决方案
There is a working code, but it should be more customize, interactivize, and refactorize depending on your need:
// You can also modify the data in the `handleChnage`
// Or conditionally display it like here:
class EditableTable extends React.Component {
state = {
surNameShow: false
};
constructor(props) {
super(props);
this.columns = [
{
title: "Name",
dataIndex: "name",
width: "30%"
},
{
title: "Surname",
dataIndex: "surname",
width: "30%"
}
];
this.state = {
dataSource: [
{
key: "0",
name: "Edward 1",
surname: "King 1"
},
{
key: "1",
name: "Edward 2",
surname: "King 2"
}
]
};
}
handleChnage = key => {
this.setState({ surNameShow: !this.state.surNameShow }, () => {
console.log(this.state.surNameShow);
});
};
render() {
const { dataSource } = this.state;
const columns = this.columns;
return (
<div>
<p className="mr-3"> Show surname</p>
<Switch onChange={() => this.handleChnage()} />
<Table
bordered
dataSource={dataSource}
columns={
this.state.surNameShow
? columns
: columns.filter(ea => ea.dataIndex !== "surname")
}
pagination={false}
/>
</div>
);
}
}
ReactDOM.render(<EditableTable />, document.getElementById("container"));
这篇关于Ant Design for React:显示/隐藏特定列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
