react18+antdPro可编辑表格的使用和数据联动

在项目中经常会遇到这样的需求 表格数据是需要编辑的 而且有联动的需求，比如 结论是单选形式 选了存疑的 才能选存疑类型 然后会在上面tag显示对应的人数 存疑 > 0 人就显红， 符合要求小于总数就显红 而且选择为符合要求后 还要清空存疑类型

在vue中这很好实现 得益于v-model的双向绑定， 才开始做react项目不久， 确实让我犯了难 只知道用render写自定义组件，但是里面内容不知道咋么写 form中的name咋办能获取到数组中每行的内容，而且数据是单向的。 而且antdPro官方的文档有些晦涩难懂，所以做出来后总结一下，希望也能给大家有所帮助。

首先配置可编辑列表的key

  const defaultData: any[] = [
    // 初始化数据源
    // ...
    { type: '建造师', address: '156', id: '123456', jl: 0, cylx: [] },
    { type: '建师', address: '44', id: 33, jl: 0, cylx: [] },
    { type: '阮经天', address: '44', id: 313, jl: 0, cylx: [] },
    { type: '刘德华', address: '444', id: 343, jl: 0, cylx: [] },
  ];
	// 这表示把数据源中所有的id作为可编辑表格key  也就是全部都可编辑，同时要在可编辑表格中type修改为多选
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() =>
    defaultData.map((item) => item.id),
  );
  //表格的响应式数据
  const [dataSource, setDataSource] = useState(() => defaultData);
  // tag的响应式数据
  const [person, setPerson] = useState<Person>({
    total: defaultData.length,
    meetsRequirement: 0,
    doubt: 0,
    socialSecurityDoubt: 0,
    certificateDoubt: 0,
    majorNotMatch: 0,
  });

然后就是对表格列的配置, 如果不希望这一列编辑 就editable:false

 const columns: ProColumns[] = [
    {
      title: '序号',
      width: 70,
        // 本列不可编辑
      editable: false,
      render: (_: any, __: any, index: number) => {
        return index + 1;
      },
    },
    {
      title: '姓名',
      dataIndex: 'type',
      editable: false,
      width: 80,
      key: 'age',
    },
    {
      title: '身份证',
      editable: false,
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '年龄',
      editable: false,
      dataIndex: 'address',
      width: 60,
      key: 'address',
    },
    {
      title: '证书专业',
      editable: false,
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '社保信息',
      editable: false,
      dataIndex: 'sbxx',
      width: 80,
        // 自定义该列的渲染
      render: (_: any, record: any) => <SocialSecurityModal id={record.id} />,
      key: 'address',
    },
    {
      title: '系统提示	',
      editable: false,
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '结论',
      width: 220,
      key: 'jl',
      dataIndex: 'jl',
        //  如果是可编辑的状态  就会渲染如下的组件 ，这里不需要绑定任何，  会自动被赋值到表格的dataSource中该列对应的dataIndex
      renderFormItem: () => {
        return (
          <Radio.Group>
            <Radio value={1}>符合要求</Radio>
            <Radio value={2}>存疑</Radio>
          </Radio.Group>
        );
      },
    },
    {
      title: '存疑类型',
      width: 330,
      key: 'cylx',
        // 是否可编辑的条件，如果选了存疑 返回true才可编辑
      editable: (_: any, record: any) => record.jl === 2,
      dataIndex: 'cylx',
        // 这是第二种编辑渲染方式 有内置的valueType可以在antdPro官方文档查看
      valueType: 'select',
        // 这里设置对应valueType的子组件的属性 这里设置的就是select框的子属性
      fieldProps: {
        mode: 'multiple', // 添加 mode 属性以启用多选
      },
      valueEnum: {
        majorNotMatch: '专业存疑',
        certificateDoubt: '证书存疑',
        socialSecurityDoubt: '社保存疑',
      },
    },
  ];

最后 再渲染这个editTable和Tips组件即可

<Tips
        title="工程序列中级以上职称和注册建造师合计不少于3人，且结构、材料或化工等专业齐全。"
        desc="技术工人"
        person={person}
      />
      <EditableProTable
        className="mb-3"
        columns={columns}
        request={async () => ({
          data: dataSource,
          total: dataSource.length,
          success: true,
        })}
          // 可伸展框的自定义渲染
        expandable={{
          expandedRowRender: (record) => (
            <Descriptions bordered layout="vertical" column={5}>
              <Descriptions.Item label="证书类型">{record.address}</Descriptions.Item>
              <Descriptions.Item label="证书编号">{record.address}</Descriptions.Item>
              <Descriptions.Item label="专业">{record.address}</Descriptions.Item>
              <Descriptions.Item label="级别">{record.address}</Descriptions.Item>
              <Descriptions.Item label="附件">{record.address}</Descriptions.Item>
            </Descriptions>
          ),
        }}
        rowKey="id"
        recordCreatorProps={false}
          // 这两行一定要加  这样表格才是可控的，也就是双向绑定的！
        value={dataSource}
        controlled
          // 表格数据变化时候触发，editable中也有个属性onValuesChange也是如此，试了下好像作用是一样的
        onChange={(val) => {
          console.log('onChange', val);
          let meetsRequirement = 0;
          let doubt = 0;
          let socialSecurityDoubt = 0;
          let certificateDoubt = 0;
          let majorNotMatch = 0;
          const res = val.map((item) => {
            // 如果jl为符合要求，清空cylx数组
            if (item.jl === 1) {
              meetsRequirement++;
              item.cylx = [];
            } else if (item.jl === 2) {
              doubt++;
            }
            if (item.cylx.length > 0) {
              if (item.cylx.includes('socialSecurityDoubt')) {
                socialSecurityDoubt++;
              }
              if (item.cylx.includes('certificateDoubt')) {
                certificateDoubt++;
              }
              if (item.cylx.includes('majorNotMatch')) {
                majorNotMatch++;
              }
            }

            return item;
          });
        //一定要注意set一下 这就是和vue的区别 数据要自己设置回传，我感觉就是vue就是双向奔赴只管数据就行了，但在react中要你主动设置数据响应式，你不主动，就不会有故事，
          setPerson({
            ...person,
            doubt,
            socialSecurityDoubt,
            certificateDoubt,
            majorNotMatch,
            meetsRequirement,
          });
          setDataSource(() => res);
        }}
        toolBarRender={false}
        editable={{
          editableKeys,
          type: 'multiple',
          onChange: setEditableRowKeys,
        }}
      />

刚开始写react确实很不适应 各位大佬还请批评指正