フロントエンド js は、選択したデータをテーブルに動的に追加する実装を行います。

下図のようにテーブルの上に属性内容があり、ドロップダウンリストから選択すると、選択した内容が下のテーブルに追加されます。




実装方法 (これらの動的に追加されたフィールドはバックエンドによって返され、バックエンド自体が処理するため、バックエンドと一致する必要があります。フロントエンドが行う必要があるのは、データに基づいてドロップダウン データをテーブルにマッピングすることです。 (バックエンドによって返され、追加、削除、変更、クエリを実装します。)
通常、テンプレート文字列メソッドが使用されますが、場合によってはマップの割り当てを直接行うこともできます。

次のように。

			<>
            销售属性：
            <Select
              style={
   
   { width: 260, marginRight: 10 }}
              size="small"
              mode="multiple"
              maxTagCount="responsive"
              value={this.props.salesAttrCodes}
              options={this.props.selsetList} // 展示的数据，后端返回，自己调取接口获取后赋值
              onChange={(value) => {
                this.handleChangeSalesAttr(value);
              }}
            />
          </>

	  handleChangeSalesAttr = (value) => {
	    this.props.changeSalesAttrCodes(value);
	    const addrowsData = this.props?.selsetListAll?.filter((item) => {
	      return value.includes(item.catePropCode);
	    });
	    const addrows =
	      addrowsData.length &&
	      addrowsData.map((item) => {
	        let them;
	        if (item?.isHand) {
	          them = { // 表格定义的规则 。
	            title: item.catePropName,
	            width: 180,
	            dataIndex: item.catePropCode,
	            align: 'left',
	            editable: true,
	            rules: [{ required: item.isMust, message: '必填' }],
	            field: () => {
	              return {
	                formOption: {
	                  type: '$textArea',
	                  props: {
	                    showCount: true,
	                    maxLength: 200,
	                    placeholder: '请输入且最多200个字',
	                  },
	                },
	                name: item.catePropCode,
	              };
	            },
	          };
	        } else {
	          them = {
	            title: item.catePropName,
	            width: 180,
	            dataIndex: item.catePropCode,
	            align: 'left',
	            editable: true,
	            rules: [{ required: item.isMust, message: '必填' }],
	            field: () => {
	              return {
	                formOption: {
	                  type: '$select',
	                  props: {
	                    placeholder: '请选择',
	                    options: item.valueNames.split('；').map((item) => {
	                      return {
	                        label: item,
	                        value: item,
	                      };
	                    }),
	                  },
	                },
	                name: item.catePropCode,
	              };
	            },
	          };
	        }
	        return them;
	      });
	      // 重新触发更新表格
	    this.setState({
	      AddTableColumns: addrows,
	    });
	  };