## 通用表单

### 使用说明

``` vue
<template>
  <!-- formId 为必传参数 -->
  <!-- v-model 可以双向绑定表单内容-->
  <dil-form formId="1" v-model="value"></dil-form>
</template>
<script>
export default {
  data() {
    return {
      // 这个是整个表单所填入的内容对象
      value: {}
    };
  }
};
</script>
```



### 参数说明

#### formId : 表格的唯一标识

通过最后面的表单编辑器获取



#### value : 表单所被填写的内容

value 是一个对象，每个键值对代表一个表单项，键是参数名，值是用户所填写的内容



## 后端接口说明

### 参数说明

#### data:Array 表单数据源

```  javascript
// 数据数组 包含多组表单数据
[
    // 一组表单
    {
        id:1,
        // 当前组的标题
        label:'',
        // 当前组所包含的数据
        list:[{
            // 标签文本的内容
            label:'名称',
            // 属性名称
            prop:'',
            // 控件的类型
            type:'',
            
            // 以下属性只要有一个就可以了
            // radio：单选
            radio:{
                // 可选内容
                list:[{
                    // 默认值
                    value:'',
                    // Radio 的 value
                    label:'',
                    // 是否禁用
                    disabled:false,
                }],
                // 可选内容为请求获取时
                request:{
                    // 请求地址
                    url:'',
                    // 请求方式
                    method：'get',
                    // 请求参数 跟在链接后的参数
                    params:[{}],
                	// 请求参数 请求体中的参数
                	data:[{}],
		        }
              	// 默认选中值
              	value:'',
              },
    			// checkbox：多选
                
                // input：普通的输入框
                input:{
                    // 默认值
                    value:'',
                    // 输入框占位文本
                    placeholder:'',  
                    // 禁用
                    disabled:false,
                    // 类型
                    // text，textarea 和其他 原生 input 的 type 值
                    type:'',
                },
                
                // select：下拉选择器
                select:{
                    // 可选内容
                    list:[{
                        // 默认值 
                        value :'',
                        // 选项的标签，若不设置则默认与 value 相同
                        label:'',
                    }]
                },
                
                // switch：开关
                // time-picker：时间选择器
                // date-picker：日期选择器
                // datetime-picker：时间日期选择器
                // textarea：多行文本
            }
        ]
    }
]
```



## 相关网站

### 表单编辑器

https://diluitable.steerinfo.com/#/addFormData
