formCreate 表单

标签：title type 表单 clearable props true options formCreate

1. 全局引入formcCreate  

main.js 

import formCreate from '@form-create/element-ui'//表单设计器引入 Vue.use(formCreate)   <form-create v-model="fApi" :rule="freeRule" :option="freeOptions" :value.sync="freeForm"  class="formCreate"/>   data 中：   //统一配置form表单 freeOptions:{          form: {           inline: true,           labelWidth: null,         },         submitBtn:{           type: "primary",           plain: true,           round: false, //是否圆角按钮           loading: false,//是否加载中状态           disabled: false,//是否禁用状态           innerText: '查 询',           click:()=>this.handleSearchSubmit()//事件名         },         resetBtn:{           type: "primary",           plain: true,           round: false, //是否圆角按钮           loading: false,//是否加载中状态           disabled: false,//是否禁用状态           innerText: '重 置',           icon:"",           show:true, //显示隐藏           click:()=>this.handleSearchReset() //事件名         }       }, computed: 配置form 表单的数据 computed: {       freeRule:function(){         return[                               {             type: "select",             title: "",             field: "arapType",             props: {               placeholder: '类别',               clearable:true,             },             options:[               {value: "AR",label: "应收",},               {value: "AP",label: "应付",},             ]           },           {             type: "select",             title: "",             field: "ppCc",             props: {               placeholder: '付费方式',               clearable:true,             },             options:[               {value: "PP",label: "PP/预付",},               {value: "CC",label: "CC/到付",},             ]           },           {             type: "base-selectPage",             title: "",             field: "feeItemId",             props: {               placeholder: '费用名称',               clearable:true,               data: this.feeName_options,               keyField: 'pubFeeItemId',               showField: 'nameCn',               concatField:"code_nameCn",//concatField 优先级高于searchField ，是类似于回显拼接的形式               searchField: 'searchField',               tbColumns: [                 { title: 'CODE', data: 'code' },                 { title: '中文名', data: 'nameCn' },                 { title: '英文名', data: 'nameEn' },               ],             },             // options:changeOptionsName(this.feeName_options,"pubFeeItemId","nameCn"),             // ...commonProps           },           {             type: "base-selectPage",             title: "",             field: "customerId",             props: {               data: "/transportPrice-api/crm/corporation/getSimpleTypePage/1",               keyField: 'pubCorporationId',               showField: 'nameCn',               searchField: 'keyword',               concatField:"code_nameCn",               clearable:true,               searchParams:{customerStep:1},               placeholder:"结算公司",               tbColumns: [                 { title: 'CODE', data: 'code' },                 { title: '中文名', data: 'nameCn' },                 { title: '英文名', data: 'nameEn' },               ],             }           },           {             type: "select",             title: "",             field: "unit",             props: {               placeholder:'单位',               clearable:true,             },             options:changeOptionsName(this.unit_options,"code","code"),           },           {             type: "select",             title: "",             field: "currency",             props: {               placeholder:'币制',               clearable:true,             },             options:changeOptionsName(this.currency_options,"code","code"),           },           {             type: "input",             title: "",             field: "startAmount",             col:{               span:12             },             props: {               placeholder: '金额起',               clearable:true,                         },           },           {             type: "input",             title: "一",             field: "endAmount",             col:{               span:12             },             props: {               placeholder: '金额止',               clearable:true,                           },           },           {             type: "select",             title: "",             field: "payPlace",             props: {               placeholder:'结算方式',               clearable:true,             },             options:changeOptionsName(this.payPlace_options,"code","nameCn"),           },           {             type: "select",             title: "",             field: "corpName",             props: {               placeholder:'结算地',               clearable:true,             },             options:changeOptionsName(this.settlementPlace_options,"corpidop","name"),           },           {             type: "input",             title: "",             field: "remark",             props: {               placeholder: '备注',               clearable:true,             },                     },         ]       }   },   utils.js 配置数据名称的转换 /**  * 修改键名  * @param {*} arr  * @param {*} oldName  * @param {*} newName  */ export function changeOptionsName (arr = [], oldValue, oldLabel, newValue = 'value', newLabel = 'label') {   const arr1 = []   if (arr && arr.length) {     for (let i = 0; i < arr.length; i++) {       const r = JSON.parse(JSON.stringify(arr[i]));       oldValue && (r[newValue] = r[oldValue])       oldValue && delete r[oldValue]
      oldLabel && (r[newLabel] = r[oldLabel])       oldLabel && delete r[oldLabel]       arr1.push(r)     }   }   return arr1 } 　　获取fomCreate     handleSearchSubmit(){       this.fApi.submit((formData,fApi) =>{         console.log(JSON.stringify(formData));         this.getList(formData);       })     },     // 重置     handleSearchReset(){       this.fApi.resetFields(); }

标签：title,type,表单,clearable,props,true,options,formCreate
From： https://www.cnblogs.com/rockyjs/p/17559261.html