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值即可。


回见
4 声望0 粉丝