招聘网站怎么做推广,北京网上申请营业执照,电子信息工程是互联网专业吗,网站建设预算明细最近看到后端同事在弄一个后台管理系统#xff0c;额#xff0c;前端真的是夹缝中生存啊#xff0c;AI抢饭碗#xff0c;后端也想干前端的活儿。。。
他用到了表单构建器#xff0c;具体效果如下: 网上有很多适用于ElementUi和ant-design的form design插件#xff0c;下…最近看到后端同事在弄一个后台管理系统额前端真的是夹缝中生存啊AI抢饭碗后端也想干前端的活儿。。。
他用到了表单构建器具体效果如下: 网上有很多适用于ElementUi和ant-design的form design插件下面介绍一套完整的适用于ant-design的使用方法
步骤1form-builder组件封装
在components中添加form-builder文件夹 文件夹内容如下 稍后我会把整个文件夹压缩上传到资源中有需要的可自行下载。
步骤2在页面中使用
我这边是在个弹窗中使用的所以需要在弹窗中引入
templatea-modalwidth100%:titletitle:visiblevisible:confirm-loadingconfirmLoading:footernullcancelhandleCanceldiv styleheight: 600px;overflow-y:auto;FormBuilder v-modeldata :gatewaygateway :userModel{} getDatasaveData //div/a-modal
/template对应的script中的代码
script
import FormBuilder from /components/form-builder/FormBuilder;
import { addProp, updateProp, getPropDetail } from /services/project/propTemplate;//这个是接口具体得让后端同事处理了。
export default {components: {FormBuilder},data() {return {title: 新增属性,visible: false,confirmLoading: false,data: {propName: ,list: [],config: {}},gateway: this.$store.state.setting.gateway,//gateway: http://192.168.16.100:9001也是后端同事提供templateId: ,id: }},methods: {showModal(templateId, record) {this.templateId templateId;if (record) {this.title 编辑属性;this.id record.id;this.getDetail();} else {this.title 新增属性;this.id ;this.data {propName: ,list: [],config: {}}}this.visible true;},getDetail() {getPropDetail({propertyTemplateId: this.templateId,templateId: this.id}).then(res {this.data {propName: res.data.name,list: res.data.templateFiled JSON.parse(res.data.templateFiled),config: res.data.templateText JSON.parse(res.data.templateText)}})},saveData(v) {this.visible false;if (this.id) {updateProp({propertyTemplateId: this.templateId,templateId: this.id,//模板属性id}, {name: v.propName,templateText: JSON.stringify(v.config),templateFiled: JSON.stringify(v.data)}).then(res {this.$message.success(保存成功);this.$emit(ok);})} else {addProp(this.templateId, {name: v.propName,templateText: JSON.stringify(v.config),templateFiled: JSON.stringify(v.data)}).then(res {this.$message.success(保存成功);this.$emit(ok);})}},handleCancel() {this.visible false;}}
}
/script步骤3步骤2弹窗的使用
import PropEdit from ./PropEdit;
export default {components: {PropEdit},
}页面使用
a-button typeprimary click$refs.propEdit.showModal(templateId)新增/a-button
PropEdit refpropEdit okgetPropList/PropEdit
