🧐[问题] editableProTable 里面select 如何联动

[jiangyh1024]

比如有两列 一列是省市 ， 一列是 对应的城市

选择了 省市 才会去读取 对应的城市

目前是选了省市后， 读取城市 ，然后重新setColumn - 重新给城市column的renderFormItem赋值 实现的

不知道有木有更简便的方法？

[hui5]

// 相互依赖的组件联动
<ProForm>
  <Form.Item noStyle shouldUpdate>
    {(form) => {
      return (
        <ProFormSelect
          options={[
            {
              value: "chapter",
              label: "盖章后生效",
            },
          ]}
          width="md"
          name="useMode"
          label={`与${form.getFieldValue("name")}合同约定生效方式`}
        />
      );
    }}
  </Form.Item>
</ProForm>;

对应到table的column是： renderFormItem: (schema, config, form) => { 第三个参数应该是form实例

然后里面可以设置 shouldUpdate formItemProps: { shouldUpdate: true, },

感觉是这个意思， 你可以试一下

[hui5]

刚才试了一下， 和想象的不一样，假如有两列， title， desc， 修改title， desc的renderFormItem是会自动执行的

    renderFormItem: (schema, { record }, form) => {
        console.log(form.getFieldsValue());
        return (
          <span>
            {record.title}
            {'-'}
            {form.getFieldValue('title')}
          </span>
        );
      }

上面， form.getFieldsValue()， record.title 都能得到值， 这个form.getFieldValue('title')没有值， 可能是我开的多行编辑模式的缘故。

[chenshuai2144]

table 中 get 要加上行号，不然不知道你要的是哪个 title

[ayaayaayaai]

select 联动问题解决了吗

[jiangyh1024]

我想问的是 选了省份 - 然后先触发api调用 后台返回数据后 应用到 城市列当中

[jiangyh1024]

@ayaayaayaai 目前实现方式是 选了第一列数据后 先去调用api 之后用setColumn 找到第二列 然后重新对 第二列的 renderFormItem 赋值 才可以哦

我也在找有木有简单的办法

[ayaayaayaai]

在editable 绑定form getFieldValue setFieldsValue 可以实现 联动

[jiangyh1024]

是的 但是我要绑定 Select的数据源 不知道有木有简便方法

[hui5]

你这个应该是， 先选择省份， 然后城市列的 renderFormItem 会自动更新， 通过省份字段， 调用api， 拿到城市列表。

[jiangyh1024]

是的呢 拿到列表后 怎么更新select呢？

我指的是 调用api 后 更新select

目前我是通过setColumns 找到column 然后重新赋值的

有木有什么简单的方法

[hui5]

renderFormItem: ( _, {record})=> <ProFromSelect name='city' request: .... , params: { province: record.province} >

我感觉这样是可以的， renderFormItem 运行， params 会变化，触发请求，返回options，select就自动有列表了。

[Shenlu1]

在别的issue看到好像可以对列使用request，传入的参数params可以依赖于其他的列通过form的getFieldValue来获取 找不到原issue了，可以试一下~

[laosandegudai]

在别的issue看到好像可以对列使用request，传入的参数params可以依赖于其他的列通过form的getFieldValue来获取 找不到原issue了，可以试一下~

prams 如何获取值？这个涉及到操作时表单的显示，还有就是表格的加载渲染？

[chenshuai2144]

设置一下 dependencies={['name']}

request 中就会注入

request={(params)=>{
  console.log(params.name)
}}

[laosandegudai]

设置一下 dependencies={['name']}

request 中就会注入

request={(params)=>{
  console.log(params.name)
}}

好像不太行 { title: '引用模型属性', dataIndex: 'referenceModelItemId', valueType: 'select', dependencies: ['referenceModelId', 'name'], hideInTable: hideInPage(), request: (params) => { console.log(params); return getModelItems(params.name) } },

控制台返回 这个keywords也不知道从哪来的。

[chenshuai2144]

你升级下依赖是最近的新功能

[laosandegudai]

你升级下依赖是最近的新功能

昨天升级到最新版本后，出现如下警告 column定义 ` { title: '引用模型属性', dataIndex: 'referenceModelItemId', valueType: 'select', hideInTable: hideInTable(), // fieldProps: { // options: currentModelItems // }, dependencies: ['name'], request: async (params) => { console.log(params.name, params); return []; }

    },`

表格定义

<EditableProTable<any> search={false} columns={columns} rowKey='name' editable={ { type: 'single', // onChange: (preEditableKeys, editableRows) => { getModelItems(editableRows[0]?.referenceModelId) } } } onChange={setItems} recordCreatorProps={{ record: () => ({ name: Date.now() }) }} options={false} value={items} actionRef={tableRef} // scroll={{ x: 1300 }} toolbar={ { multipleLine: true, tabs: { onChange: (activeKey) => { setTabKey(activeKey) }, items: [{ key: 'db', tab: '数据库属性', }, { key: 'page', tab: '页面属性', },] } } } /> 还是没搞定。我看提交的代码里有schemaform的测试。

[laosandegudai]

比如有两列 一列是省市 ， 一列是 对应的城市

选择了 省市 才会去读取 对应的城市

目前是选了省市后， 读取城市 ，然后重新setColumn - 重新给城市column的renderFormItem赋值 实现的

不知道有木有更简便的方法？

请问搞定没？

[jiangyh1024]

我还是用的之前的方法啊， 重新setColumn哦 没有改

[laosandegudai]

我还是用的之前的方法啊， 重新setColumn哦 没有改

好的，最新版本发布了新的功能，可以实现表单项联动，我试了下没搞定。 目前我是编辑的时候在onchang里面加载数据，让依赖字段绑定这个数据。

[jiangyh1024]

那个项目已经结束了，就没管了 哈哈

[laosandegudai]

那个项目已经结束了，就没管了 哈哈

好的，😊

[LoveEocding]

同样的问题 有没有简单的解决方案

[LoveEocding]

你升级下依赖是最近的新功能

多少版本

[LoveEocding]

你升级下依赖是最近的新功能

昨天升级到最新版本后，出现如下警告 column定义 ` { title: '引用模型属性', dataIndex: 'referenceModelItemId', valueType: 'select', hideInTable: hideInTable(), // fieldProps: { // options: currentModelItems // }, dependencies: ['name'], request: async (params) => { console.log(params.name, params); return []; }

    },`

表格定义

<EditableProTable<any> search={false} columns={columns} rowKey='name' editable={ { type: 'single', // onChange: (preEditableKeys, editableRows) => { getModelItems(editableRows[0]?.referenceModelId) } } } onChange={setItems} recordCreatorProps={{ record: () => ({ name: Date.now() }) }} options={false} value={items} actionRef={tableRef} // scroll={{ x: 1300 }} toolbar={ { multipleLine: true, tabs: { onChange: (activeKey) => { setTabKey(activeKey) }, items: [{ key: 'db', tab: '数据库属性', }, { key: 'page', tab: '页面属性', },] } } } /> 还是没搞定。我看提交的代码里有schemaform的测试。

请问解决了吗 我也有同样的场景 试了很多种，发现并没有什么效果

[laosandegudai]

你升级下依赖是最近的新功能

昨天升级到最新版本后，出现如下警告 column定义 ` { title: '引用模型属性', dataIndex: 'referenceModelItemId', valueType: 'select', hideInTable: hideInTable(), // fieldProps: { // options: currentModelItems // }, dependencies: ['name'], request: async (params) => { console.log(params.name, params); return []; }

    },`

表格定义 <EditableProTable<any> search={false} columns={columns} rowKey='name' editable={ { type: 'single', // onChange: (preEditableKeys, editableRows) => { getModelItems(editableRows[0]?.referenceModelId) } } } onChange={setItems} recordCreatorProps={{ record: () => ({ name: Date.now() }) }} options={false} value={items} actionRef={tableRef} // scroll={{ x: 1300 }} toolbar={ { multipleLine: true, tabs: { onChange: (activeKey) => { setTabKey(activeKey) }, items: [{ key: 'db', tab: '数据库属性', }, { key: 'page', tab: '页面属性', },] } } } /> 还是没搞定。我看提交的代码里有schemaform的测试。

请问解决了吗 我也有同样的场景 试了很多种，发现并没有什么效果

木有解决，但是新版本提供了dependencies,但是我用了后还是会有问题，你可以试试。

[Mustang-Galaxy]

比如有两列 一列是省市 ， 一列是 对应的城市

选择了 省市 才会去读取 对应的城市

目前是选了省市后， 读取城市 ，然后重新setColumn - 重新给城市column的renderFormItem赋值 实现的

不知道有木有更简便的方法？

请问下，setColumn 的方式是怎么样的 另外这个组件有提供dependencies属性，但是不起作用

[plholx]

用 useState + fieldProps.onChange + params + request 组合就可以实现啦：

const [province, setProvince] = React.useState('');

const columns = [
    {
        title: '省',
        dataIndex: 'province',
        valueType: 'select',
        request: async () => {
            // TODO 发请求，获取省选项列表
            let result = [];
            return result;
        },
        fieldProps: {
            onChange: (value)=>{
                setProvince(value);
            }
        }
    },
    {
        title: '市',
        dataIndex: 'city',
        valueType: 'select',
        params: {"province": province},
        renderText: (text, record)=>{
            return text;
        },
        request: async (arg, option) => {
            let curProince = arg.province || option?.record?.province;
            if(!curProince){
                return [];
            }
            // TODO 获取当前省，发请求，获取对应的市选项列表
            let result = [];
            return result;
        }
    }
]