前端 js实现 选中数据 动态 添加在表格中

如下图展示,表格上方有属性内容,下拉选中后,根据选中的内容,添加在下方的表格中。



实现方式,(要和后端约定,因为这些动态添加的字段都是后端返回的,后端自己会做处理,我们前端要做的是,就是根据后端的返回下拉数据,映射到表格上,并实现增删改查。)

一般可能会 用 ``模板字符串 方法,但是有时候可以直接map赋值。

如下 。

复制代码
			<>
            销售属性:
            <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,
	    });
	  };
相关推荐
知识分享小能手5 分钟前
Vue3 学习教程,从入门到精通,Axios 在 Vue 3 中的使用指南(37)
前端·javascript·vue.js·学习·typescript·vue·vue3
程序员码歌3 小时前
【零代码AI编程实战】AI灯塔导航-总结篇
android·前端·后端
七七&5563 小时前
2024年08月13日 Go生态洞察:Go 1.23 发布与全面深度解读
开发语言·网络·golang
java坤坤3 小时前
GoLand 项目从 0 到 1:第八天 ——GORM 命名策略陷阱与 Go 项目启动慢问题攻坚
开发语言·后端·golang
元清加油3 小时前
【Golang】:函数和包
服务器·开发语言·网络·后端·网络协议·golang
用户21411832636023 小时前
免费玩转 AI 编程!Claude Code Router + Qwen3-Code 实战教程
前端
健康平安的活着4 小时前
java之 junit4单元测试Mockito的使用
java·开发语言·单元测试
小小愿望5 小时前
前端无法获取响应头(如 Content-Disposition)的原因与解决方案
前端·后端
小小愿望5 小时前
项目启功需要添加SKIP_PREFLIGHT_CHECK=true该怎么办?
前端
烛阴5 小时前
精简之道:TypeScript 参数属性 (Parameter Properties) 详解
前端·javascript·typescript