在特定条件下通过单击表格展开一行 Ant Design table react js [英] Expand a row by click of table on a certain condition Ant Design table react js
本文介绍了在特定条件下通过单击表格展开一行 Ant Design table react js的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要一点帮助.
我需要编写代码,以便表格行仅在切换打开时才展开,而切换关闭时不应展开.我使用属性 expandRowByClick
在单击时展开一行.但这里的问题是当切换关闭时它不应该可点击,但现在一个空行会扩展.我怎样才能避免它?
I need to write the code such that the table row should expand only when it's toggle is on when the toggle is off it should not expand. I have used the property expandRowByClick
to expand a row when it is clicked. But here the problem is when the toggle is off it should not clickable, but right now an empty row will expand. How can I avoid it?
谁来帮帮我.谢谢.
沙盒链接:https://codesandbox.io/s/purple-sun-1rtz1?file=/index.js
推荐答案
只需粘贴此代码.这是工作 .希望这会帮助你.
just paste this code . it is working . Hope this'll help you .
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Switch } from "antd";
const { Column } = Table;
class EditableTable extends React.Component {
state = {
firstRow: false,
secondrow: false
};
constructor(props) {
super(props);
this.state = {
dataSource: [
{
key: "0",
name: "Edward King 0",
expandable: false
},
{
key: "1",
name: "Edward King 1",
expandable: false
}
]
};
}
handleChnage = key => {
let k = parseInt(key);
let data = this.state.dataSource;
let value = data[k].expandable;
data[k].expandable = !value;
this.setState({
dataSource: data
});
};
render() {
const { dataSource } = this.state;
return (
<Table
bordered
dataSource={dataSource}
pagination={false}
expandRowByClick={true}
expandable={{
expandedRowRender: record => (
<p style={{ margin: 0 }}>{"Here is expandable row"}</p>
),
rowExpandable: record => record.expandable
}}
>
<Column title="name" dataIndex="name" width="30%" editable={true} />
<Column
align="right"
render={(text, record, index) => {
return <Switch onChange={() => this.handleChnage(record.key)} />;
}}
/>
</Table>
);
}
}
ReactDOM.render(<EditableTable />, document.getElementById("container"));
这篇关于在特定条件下通过单击表格展开一行 Ant Design table react js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文