# ele-base-form

> component baseform

Latest version **1.0.46** (published 2020-05-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install ele-base-form
pnpm add ele-base-form
yarn add ele-base-form
bun add ele-base-form
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.46 |
| Published | 2020-05-26 |
| First published | 2019-07-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 54 KB |
| Known vulnerabilities | 0 (+26 in 2 direct dependencies) |
| Install scripts | no |
| Author | zhuwenqi |
| Maintainers | zhuwenqi001 |

## Links

- npm: https://www.npmjs.com/package/ele-base-form
- npm.io page: https://npm.io/package/ele-base-form

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.5.11
- [axios](https://npm.io/package/axios.md) ^0.19.0
- [element-ui](https://npm.io/package/element-ui.md) ^2.10.1

## Recent versions

- 1.0.46 (latest) — 2020-05-26
- 1.0.45 — 2020-05-25
- 1.0.44 — 2020-05-24
- 1.0.43 — 2020-05-20
- 1.0.42 — 2020-05-20
- 1.0.41 — 2020-05-20
- 1.0.40 — 2020-05-18
- 1.0.39 — 2020-01-16
- 1.0.38 — 2020-01-07
- 1.0.37 — 2019-12-23
- 1.0.36 — 2019-12-20
- 1.0.35 — 2019-12-19
- 1.0.33 — 2019-11-29
- 1.0.32 — 2019-11-20
- 1.0.31 — 2019-11-20
- … 45 more at https://npm.io/package/ele-base-form/versions

## README

# 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' |v
| 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 | - | - |

---
_Source: https://npm.io/package/ele-base-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._