How do I assign the obtained data source to the drop-down radio option value of the subform?

1. Scenario

When we use a third-party interface to obtain data, we want to process the obtained data into the option value of the drop-down radio component in the subtable, select and submit the data.

2. Video Display

此处为语雀视频卡片，点击链接查看：0721 数据源给子表下拉单选赋值.mov

3. Procedure

3.1 obtain data

Use a third-party interface to obtain data. Here, create a form and use the page data source interface to obtain data.

(1) add a remote data source to the data source and call the search form instance details List interface based on criteria. The interface configuration is shown in the following figure:

Reference documents:YIDA platform interface (page data source can be called directly)

3.2 The data returned by the request is processed in the didFetch function.

Because the format of the drop-down radio component assignment is [{"text":"123","value":"123"}], so we need to process the data into this format. Here, we need to keep the text and value consistent.

The reference code is as follows:

function didFetch(content) {
  const value = [];
  const data = content.data.map((item) => {
    let arr = {
      text: item.formData.textField_kqvnu2vz,
      value: item.formData.textField_kqvnu2vz,
    }
    value.push(arr);
    console.log(arr);
  })
  
  return value;
}

3.3 assign values to the drop-down radio component

When the form page is loaded, load the data source to obtain the processed data res and assign res to the DataSource of the drop-down radio component in the subtable, as shown in the following figure:

The reference code is as follows:

export function didMount() {
  
  console.log(`「页面 JS」：当前页面地址 ${location.href}`);
  // console.log(`「页面 JS」：当前页面 id 参数为 ${this.state.urlParams.id}`);
  // 更多 this 相关 API 请参考：https://developers.aliwork.com/docs/api/about
  // document.title = window.loginUser.userName + ' | 宜搭';

    this.dataSourceMap["getDatas"].load().then(res => {
    const tableField = this.$('子表唯一标识');
    const data = tableField.getItems()[tableField.getItems().length - 1]
    tableField.setComponentProps(data, '下拉单选唯一标识', { dataSource: res }); 
  })
}

3.4 when you add a new item to a subtable, you also need to assign the option value to the drop-down option in the row of the subtable.

Add subformonAddClick click add"Action event, which automatically assigns option values to the drop-down radio when added.

The reference code is as follows:

export function onAddClick(newGroupId) {
  console.log('点击添加');
  this.dataSourceMap["getDatas"].load().then(res => {
    const tableField = this.$('tableField_kqvnua5s');
    const data = tableField.getItems()[tableField.getItems().length - 1];
    console.log(data)
    tableField.setComponentProps(data, 'selectField_kqvnua5w', { dataSource: res });
    
  })
}

3.5 display effect

4. Try it online

• https://www.aliwork.com/bench/coe? tplUuid=TPL_F68XJ5KGSBHNBJRPUNPG

-------------------- Get the latest information YIDA, welcome to follow US--------------------