vue-form-model v1.3.0

引用

npm install vue-form-model --save

注册后即可使用

<vueFormModel v-if="editContractModal" // 显示联动 :enumList="selectAllList" // 枚举的 selectAllList labelWidth="125px" // label 宽度 :rules="rules" // 表单验证 :dataItem="contractFormDataItem" // 表单项的描述 :dataForm="contractFormData" > // 表单的初始值 model // 自定义表单项

<div slot="mySlot" style="background: #9dc7e1; display: flex; align-items: center; height: 100%;">
  <el-switch
    v-model="contractFormData.mySlot"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-value="100"
    inactive-value="0">
  </el-switch>
</div>

预览

https://file.ljchappy.com/%E8%87%AA%E5%AE%9A%E4%B9%89%E8%A1%A8%E5%8D%95.png

数据模型

contractFormDataItem: [ // input 输入框 - number、textarea等 { bindKey: 'salesManager', label: '销售经理', placeholder: '销售经理', type: 'input', }, // time 时间选择 { bindKey: 'projectApprovalTime', label: '立项审批通过时间', placeholder: '立项审批通过时间', type: 'time', timeFormat: 'yyyy-MM-dd', timeType: 'month|year'}, // select 选择框 { bindKey: 'openingDataOrNot', multiple: false, changeHandle: this.changeHandle, label: '是否期初数据', placeholder: '是否期初数据', type: 'select', selectList: { keyStr: '是', valueStr: 1 }, { keyStr: '否', valueStr: 0 }, }, // checkbox 复选框 { width: '100%', bindKey: 'myCheckBox', label: '多选测试', type: 'checkbox', checkboxList: { valueStr: '看书', keyStr: '1' }, { valueStr: '学习2', keyStr: '2' }, { valueStr: '学习3', keyStr: '3' }, { valueStr: '学习4', keyStr: '4' }, { valueStr: '学习5', keyStr: '5' }, changeHandle: this.checkboxChangeHandle, }, // radio 单选框 { bindKey: 'myRadioBox', label: '单选测试', type: 'radio', width: '100%', radioList: { valueStr: '看书', keyStr: '1' }, { valueStr: '学习', keyStr: '2' }, changeHandle: this.radioChangeHandle, }, // upload 图片上传 { bindKey: 'imageUrl', width: '100%', type: 'upload', label: '图片上传', icon: 'el-icon-folder-add', action: 'http://www.baidu.com', showFileList: false, handleUploadSuccess: this.handleUploadSuccess, beforeFileUpload: this.beforeFileUpload, }, // 自定义 { bindKey: 'mySlot', width: '66%', type: 'slot', }, ],