如下圖展示，表格上方有屬性內容，下拉選中后，根據選中的內容，添加在下方的表格中。




實現方式，（要和后端約定，因為這些動態(tài)添加的字段都是后端返回的，后端自己會做處理，我們前端要做的是，就是根據后端的返回下拉數據，映射到表格上，并實現增刪改查。）
一般可能會 用 ``模板字符串 方法，但是有時候可以直接map賦值。

如下 。

			<>銷售屬性：<Selectstyle={{ 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 = { // 表格定義的規(guī)則 。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;});// 重新觸發(fā)更新表格this.setState({AddTableColumns: addrows,});};