ele-base-form

（组件正在测试中，下个版本更新后再使用体验更好哈😂）ele-base-form 是一个基于element-ui组件的vue插件。项目实现效果为以简约的、配置化方式表达form表单，提供常用的表单关联入口，支持远程校验等。旨在为存在大量表单的后台管理系统开发提供便利。

快速使用

install

npm i --save ele-base-form

引入 main.js

import eleBaseForm from 'ele-base-form'
Vue.use(EleBaseForm)

views 中使用

变更操作主要是对formOpt的可修改，修改需要符合vue的数据更新监听机制。

<template>
  <ele-base-form v-bind="formOpt" />
</template>
<script>
  export default{
    data(){
      return {
        formOpt: {
          inline: false,
          ref: 'testform',
          formrefname: 'testform',
          forms:[
            {
              label: '基本输入框',
              prop: 'inputTest',
              slots: [{ type: 'prepend', text: 'HTTP://' }],
              defaultValue: 'www.github.com'
            }, {
              itemType: 'select',
              label: '本地下拉框',
              prop: 'select',
              options: [{ label: '数值', value: 'number' }, { label: '字符串', value: 'string' }],
              change: this.selectchange
            }, {
              itemType: 'remoteselect',
              label: '远程下拉-静态参数',
              prop: 'staticParamsRemoteSelect',
              hostName:'http://www.xxxx.com',
              apiUrl: '/api/consumer/queryApprovedConsumers',
              method: 'GET',
              remoteParams: { clusterType: 'kafka' },
              labelkeyname: 'name',
              valuekeyname: 'name',
              staticFilter: { applicant: '王强' }
              autoget: true
            }
          ]
        }
      }
    },
    methods:{
      selectchange(val, formrefname){
        console.log(val,formrefname)
      }
    }
  }
</script>

常用场景

• 对表格数据的编辑操作，将rows Object 赋值给currentFormValue。（注意rows Object key值需要与forms中的prop值对应）
• 动态生成多个表单时，为表单配置使用formrefname参数。在涉及到表单内部(下拉框)关联操作时，可以由change回调返回formrefname，通过this.$refs[formrefname]找到操作项。（ref属性和formrefname需要值一致）
• form item关联（B依赖A）（目前集中在下拉，后面持续完善）。
  • 使用配置关联的效果
    • A无值，B（remoteselect）不发起请求 (强关联，relativeProp中配置require:true)
    • A修改，B值重置为空 （必然）
    • A修改，值作为B的依据 （配置）
      • A值作为B的请求参数
      • A值作为B的本地筛选参数
  • 复杂关联的操作入口
    • change方法，作为操作forms数组的入口
• 支持下拉框远程请求、下拉分页、输入框远程校验等

API

表单整体

attribute

参数	说明	类型	可选值	默认值
inline	表单排列形式	Boolean	-	false
size	表单size	String	medium / small / mini	small
disabled	表单整体禁用,优先级高于item disabled	Boolean	-	false
labelWidth	表单统一label宽度	String	-	'150px'
currentFormValue	表单当前值。常用于编辑状态-表单赋值。其中对象key值和表单prop对应	Object	-	{}
hostName	表单中请求通用域名	String	-	-
formrefname	表单ref,常用场景：动态生成多个表单项，操作表单item时，item回调返回formrefname,以该参数作为找到当前表单的标志	String	-	baseform
forms	表单配置数组	Array	-	-

Methods

事件名称	说明	回调参数
handleFormValidate	根据rules验证form表单，访问方式为 this.$refs[refname].handleFormValidate	Function 接收valid,value两个参数
reset	重置表单数据	-
clear	清空表单数据	-

表单item

attribute

参数	说明	类型	可选值	默认值
itemType	item 类型	String	'input', 'number', 'radio', 'checkbox', 'select', 'date', 'remoteselect', 'fuzzyinput', 'elautocomplete'	'input'
label	item描述	String	-	-
labelWidth	label 宽度	String	-	-
prop	item key,必填，数组数据以它为key	String	-	-
visible	表单项是否渲染	Boolean	-	true
disabled	item 禁用	Boolean	-	false
rules	表单项验证规则	Array	-	-
placeholder	placeholder	String	-	输入框默认：请输入内容 ， 下拉框：请选择
defaultValue	item 默认值	String, Array, Number	-	-
inputType	itemType:'input' 时延伸类型	String	'text', 'textarea', 'email', 'password'	'text'
slots	itemType:'input/number' 时支持append、prepend插入	Array	[{type:'append',text:''},{type:'prepend',text:''}]	-
rows	itemType:'input',inputType:'textarea' 行数	Number	-	-
min	itemType:'number' 最小值	Number	-	-
max	itemType:'number' 最大值	Number	-	2147483647
step	itemType:'number' 增减粒度	Number	-	1
stepStrictly	itemType:'number' 是否严格控制递增递减step	Boolean	-	false
options	itemType:'select	radio	checkbox' 选项信息	Array
filterable	itemType:'select' 是否可搜索	Boolean	-	false
dateType	itemType:'date' 延伸的日期类型	String	'date', 'daterange', 'datetime', 'datetimerange'	'date'
format	itemType:'date' 日期输入框格式	String	timestamp/yyyy/MM/dd/HH/mm/ss...	'yyyy-MM-dd'
valueFormat	itemType:'date' 日期输入框值绑定格式	String	timestamp/yyyy/MM/dd/HH/mm/ss...	'yyyy-MM-dd'
startPlaceholder	itemType:'date',dateType:'daterange/datetimerange' 第一项placeholder	String	-	-
endPlaceholder	itemType:'date',dateType:'daterange/datetimerange' 第二项placeholder	String	-	-
hostName	请求域名，优先级高于form设置的hostName	String	-	-
apiUrl	请求API路径	String	-	-
method	请求类型	String	'GET', 'POST', 'PUT', 'PATCH', 'DELETE'	'GET'
resultPath	数据解析路径	Array	-	['result']
pagination	下拉框滚动到底部，分页请求,根据需要，配合传参remoteParams:{pageSize}	Boolean	-	false
pageNumKey	分页pageNum 参数key值	String	-	pageNum
pagePath	总页数所在res位置	Array	-	['result','pages']
labelkeyname	数据展示label选择项	String	-	'label'
valuekeyname	数据展示value选择项	String	-	'value'
disablekeyname	数据展示禁用key	String	label,value....	-
disableflg	数据禁用flg	Boolean,String	-	-
staticOptions	远程下拉框数据中添加的静态数据	Array	-	-
remoteParams	请求静态参数	Object	-	-
relativeProp	表单关联信息，1.被关联项修改值 重置关联项 2.paramkey作为请求的参数.3.filterkey作为静态筛选的参数[{prop:'',paramkey:'',filterkey:'',require:true/false]，require表示是否强关联(强关联项无值时，不请求)	Array	-	-
staticFilter	下拉框静态筛选参数	Object	-	{}
autoget	自动请求下拉列表数据	Boolean	-	false
change	选中回调	Function	-	-