最好的免费网站空间,南京美容网站建设,外贸建站哪家公司好,现有电商平台如下图展示#xff0c;表格上方有属性内容#xff0c;下拉选中后#xff0c;根据选中的内容#xff0c;添加在下方的表格中。 实现方式#xff0c;#xff08;要和后端约定#xff0c;因为这些动态添加的字段都是后端返回的#xff0c;后端自己会做处理#xff0c…如下图展示表格上方有属性内容下拉选中后根据选中的内容添加在下方的表格中。 实现方式要和后端约定因为这些动态添加的字段都是后端返回的后端自己会做处理我们前端要做的是就是根据后端的返回下拉数据映射到表格上并实现增删改查。 一般可能会 用 模板字符串 方法但是有时候可以直接map赋值。
如下 。 销售属性Selectstyle{{ width: 260, marginRight: 10 }}sizesmallmodemultiplemaxTagCountresponsivevalue{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,});};
