1,需求是点击查询才展示table的某一列
2,问题:如果只单纯的给查询按钮添加接口查询,通过变量控制,会出现点击某一行的按钮整个列都发生变化
3,解决
(1)columns的写法`
{
title: '标题1',
dataIndex: 'title1',
align: 'center',
key: 'title1',
render: (text, record) => {
**const { showTaskCount = false } = record;**
return !showTaskCount ? (
<Button
style={{ marginRight: 16 }}
type="primary"
onClick={() => this.showTaskCount(record, 'taskCount')}
>
查询
</Button>
) : (
<span>{record.taskCount}</span>
);
},
},
(2)方法```
showTaskCount = (record, feild) => {
const { dispatch } = this.props;
const { id } = record;
//接口和入参
dispatch({
type: 'A/B',
payload: { id },
}).then(rsp => {
if (rsp.success) {
record.showTaskCount = true;
const dataSource = this.state.dataSource.map(data => {
if (data.id === record.id) {
return { ...data, [feild]: rsp.result.taskCount };
}
return data;
});
//dataSource是table的数据源
this.setState({
dataSource,
});
}
});
};
注意:
(1)showTaskCount控制查询按钮和进度值的展示,用const { showTaskCount = false } = record 就不用在state中定义。
(2)(record, feild)-----feild是参数'taskCount'。
4,需求:table的某一列或多列可以动态的输入并修改
5,问题:修改某个input所有input的值都被改动
6,解决
(1)table下的某个title
<Table.Column
title='title2'
dataIndex='content'
cell={(val, index, record) => (
<>
<Input placeholder=''
value={val}
onChange={v =>
this.onCommonChange(v, record, 'cntent')
}
/>
</>
)}
/>
(2)方法
onCommonChange = (val,record,feild) => {
const dataSource = this.state.dataSource.map(data => {
if(data.id === record.id){
return { ...data, [field]:val}
}
return data
})
this.setState({dataSource})
}
注意:
(1)a.id === record.id 这个判断很重要,id是唯一标识值,必须是唯一没有重复的
(2)如果有多列 只需要在Table.Column下的input中调用onCommonChange方法时把'content'换成其他dataIndex值即可。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。