ProComponents用到的

1.ProTable高级表格

1.options：（操作栏配置）是一个工具栏，不设置默认true，默认显示

                

2.search：（是否显示搜索表单）不设置的时候，显示的是可以搜索，边上的展开是由于表格中的每一项都显示搜索（search没设置false），数量少了展开就没有了。

3.request：（一个获得 dataSource 的方法）可以把获取表格数据的接口写在这儿（

                request={接口}）

ProTable - 高级表格 - ProComponents (ant.design)

4.params：（request 的参数，修改之后会触发更新）调用接口传入的参数（params={{参数名：参数值}}），一旦发生变化，会触发重新加载。

2.ProFormCascader

设置默认值的时候，change方法的时候，绑定数据的时候，写在fieldProps里面

          <ProFormCascader
            placeholder="请选择省市区"
            width="md"
            name="Name"
            label="省市区"
            rules={[{ required: true }]}
            fieldProps={{
              options: TreeListData,
              fieldNames: {
                label: 'label',
                value: 'id',
              },
              onChange(value, selectedOptions) {
               console.log(selectedOptions)
              },
            }}
          />

3.ProFormSelect

        后端返回的数据不能直接赋值给下拉框的时候，map遍历,并且找到了点击的某一项，可以进行赋值等操作

         <ProFormSelect
            width="md"
            name="id"
            label="名称"
            placeholder="请选择名称"
            rules={[{ required: true }]}
            options={ListData?.map((item) => {
              return {
                value: item.id,
                label: item.name,
                key: item.code,
              };
            })}
            onChange={(e) => {
              ListData?.forEach((item) => {
                if (item.id== e) {
                    console.log(item);
                }
              });
            }}
          />

而树形控件就不用这么麻烦，他直接设置fieldNames

 <Tree
      fieldNames={{ title: 'label', key: 'id' }}
      treeData={data}
      onSelect={onSelect}
      onExpand={onExpand}
      height={600}
      loadedKeys={loadeKeys}
      expandedKeys={expandedKeys}
      selectedKeys={selectedKeys}
      onLoad={onLoad}
      style={{ margin: 10 }}
    />

树形控件 Tree - Ant Design