做网站需要自己上传产品吗,卖域名赚钱吗,深圳工装公司,衡水做网站哪家好期望目标#xff1a;实现一个能通过按钮来动态增加表格栏#xff0c;每次能添加一行#xff0c;每行末尾有一个删减按钮。
el-button typetext classprimaryclickaddMember()添加/el-button
el-table:datam…期望目标实现一个能通过按钮来动态增加表格栏每次能添加一行每行末尾有一个删减按钮。
el-button typetext classprimaryclickaddMember()添加/el-button
el-table:datamemberListstylewidth: 100%:header-cell-style{background: #fafafa,color: #aaa,fontSize: 15px,}el-table-column propindex label序号 width60template slot-scopescopespan{{ getMemberIndex(scope.$index) }}/span/template/el-table-columnel-table-column propfacilityName label设施名称template slot-scopescopeel-select v-modelscope.row.facilityName placeholder请选择名称 clearableel-option v-fordict in dict.type.data_facilities_name :labeldict.label :valuedict.value //el-select/template/el-table-columnel-table-column propfacilitySpecificType label具体类型template slot-scopescopeel-select v-modelscope.row.facilitySpecificType placeholder请选择类型 clearableel-option v-fordict in dict.type.data_facilities_type :labeldict.label :valuedict.value//el-select/template/el-table-columnel-table-column propfacilityLocation label设施位置template slot-scopescopeel-select v-modelscope.row.facilityLocation placeholder请选择位置 clearableel-option v-fordict in dict.type.data_equipment_location :labeldict.label :valuedict.value//el-select/template/el-table-columnel-table-column propfacilityTp label规格template slot-scopescopeel-input v-modelscope.row.facilityTp/el-input/template/el-table-columnel-table-column propaccountabilityUnit label责任单位template slot-scopescopeel-input v-modelscope.row.accountabilityUnit/el-input/template/el-table-columnel-table-column label操作template slot-scopescopeel-buttonsizeminitypetexticonel-icon-deleteclickhandleDelete(scope.$index,memberList)删除/el-button/template/el-table-column/el-table// 添加杆件数据按钮addMember() {var member {index: this.dataId,facilityNo: ,facilityName: ,facilitySpecificType: ,facilityLocation: ,facilityTp: ,accountabilityUnit: ,};this.memberList.push(member);},
效果 遇到的问题一在删减时当前所有行的序号需要自动删减重新计算变更序号 // 删除行数据后序号自动连贯更新getMemberIndex(index) {return this.memberList.slice(0, index 1).length ;},
/** 删除按钮操作 */handleDelete(index, listName) {if (index ! -1 listName memberList) {this.memberList.splice(index, 1)}},
给序号那一栏字段单独重设动态变更indexspan{{ getMemberIndex(scope.$index) }}/span每次删除一行调用handleDelete函数再用getMember重新计算一遍所有序号
如果有数据验证的需求就需要在table外面再嵌套一层form因为只有el-form表单猜有数据验证的功能。 el-form :modelmemberForm :rulesrules refmemberForm/el-form 问题二
多个表单同时用一个接口提交在提交数据表单时后端要求有特殊的数据结构需要将获取到的多个表单数据重新按要求整合。新设立一个json字段存储
/** 提交按钮 */async submitForms() {// 构建数据结构const facilitiesData {pointId: this.pointForm.pointId,pointName: this.pointForm.pointName,memberList: this.memberList.map(member ({facilityName: member.facilityName,facilitySpecificType: member.facilitySpecificType,facilityLocation: member.facilityLocation,facilityTp: member.facilityTp,accountabilityUnit: member.accountabilityUnit,})),}// 发送请求添加设施await addFacilities(facilitiesData).then(response {this.$modal.msgSuccess(新增成功);this.goBack();})},
