dynamic-form（动态表单）

基础用法

示例：

代码示例：

vue

<template>
  <div class="bs-bg-color-white w640 p20">
    <div class="pct40 dib mr16 mt8" :key="e" v-for="e in FORM_TYPE">
      <span>{{ FORM_TYPE_LABEL[e] }}:</span>
      <v-dynamic-form v-model="data[e]" :type="e" :options="DATA_LIST"></v-dynamic-form>
    </div>
  </div>
</template>

<script>

/**
 * 表单类型
 */
const FORM_TYPE = {
  INPUT: 'input', //输入框
  FORMAT_INPUT: 'formatInput', //金额输入框
  TEXTAREA: 'textarea', //文本域输入框
  SELECT: 'select', //选择框
  RADIO: 'radio', //单选框
  CHECKBOX: 'checkbox', //复选框
  DATE: 'date', //日期选择框
  DATE_TIME: 'datetime', //日期时间选择框
  MONTH: 'month', //月份选择框
  SWITCH: 'switch', //是否选择框
  TREE: 'tree', //树形选择框
  SELECT_INPUT: 'selectInput', //输入选择框
  FILE: 'file', //文件上传框
  AREA_INPUT: 'areaInput', //区域选择框
  BANK_INPUT: 'bankInput', //银行输入框
};

/**
 * 表单类型名称
 */
const FORM_TYPE_LABEL = {
  input: '输入框',
  formatInput: '金额输入框',
  textarea: '文本域输入框',
  select: '选择框',
  radio: '单选框',
  checkbox: '复选框',
  date: '日期选择框',
  datetime: '日期时间选择框',
  month: '月份选择框',
  switch: '是否选择框',
  tree: '树形选择框',
  selectInput: '输入选择框',
  file: '文件上传框',
  areaInput: '区域选择框',
  bankInput: '银行输入框',
};

const DATA_LIST = [
  {code: '01', name: '一'},
  {code: '02', name: '二'},
]
export default {
  data() {
    return {
      data: {checkbox: []},
      FORM_TYPE,
      FORM_TYPE_LABEL,
      DATA_LIST,
    };
  },
  methods: {
  },
};
</script>

属性：

参数	说明	类型	可选值	默认值
unit	单位（支持金额输入框元、万元、亿元切换）	String	'yuan','wanyuan','yiyuan'	'yuan'
type	表单类型（默认为输入框）	String	input,formatInput,textarea,select,radio,checkbox,date,datetime,month,switch,tree,selectInput,file,areaInput,bankInput	'input'
value	当前组件的值	String, Number, Array	-	-
options	选项数据	Array	-	[]
optionsProps	选项数据属性字段	Object	-	id:'code',label:'name',pid:'pcode',children:'children',disabled:'disabled'
placeholder	placeholder	String	-	''
readonly	是否为只读状态	Boolean	-	false
disabled	是否为禁用状态	Boolean	-	false
maxlength	type为textarea时，最大长度	Number	-	9999
showWordLimit	type为textarea时，是否显示字数统计	Boolean	-	false
inputAutosize	type为textarea时，自适应高度	Boolean	-	false
inputNegative	type为format-input时，是否可以输入负数	Boolean	-	true
clearable	是否可以清除	Boolean	-	true
multiple	是否为多选状态	Boolean	-	false
display	type为tree-input时，显示内容	String	-	'NAME'
showSecond	是否可以选择时间	Boolean	-	false
triggerOnFocus	type为select-input时，是否在输入框focus时显示选项	Boolean	-	false
collapseTags	type为tree-input时，多选状态下是否折叠已选项	Boolean	-	true
bindProps	type为datetime、selectInput时，绑定的字段	String	-	-
encrypt	type为select-input时，数据项是否加密显示	Boolean	-	false
selectInputTooltip	type为select-input时，组件是否显示提示信息	Boolean	-	false
tip	type为select-input时，提示信息	String	-	-
displayRmb	type为format-input时，是否显示人民币符号	Boolean	-	false
uploadUrl	type为file-input时，上传的url	String	-	-
formatDecimal	type为format-input时，组件小数位数	Number	-	-
treeDataType	type为tree-input时，组件数据类型	String	-	'ARRAY'
treeLeaf	type为tree-input时，组件默认的显示级次	Boolean	-	false
treeExpand	type为tree-input时，组件是否默认展开	Boolean	-	true
treeSortKey	type为tree-input时，排序字段对应的键名	String	-	-
verifyValue	是否校验数据（用于当前组件的值在选项数据中不存在，解决下拉框显示为code的问题）	Boolean	-	false

事件：

事件名	说明	参数	参数说明
input	输入事件	event	-
remove	type为file-input时，删除事件	attachIdList	文件id
verify	校验数据	verifyResult	校验结果（true/false）
focus	获取焦点事件	event	-
blur	失去焦点事件	event	-
change	组件的值变化时触发事件	...event	-
clear	清除事件	event	-
visible-change	显示隐藏改变时触发	event	-
remove-tag	删除标签触发事件	event	-

方法：

方法名	说明	参数	参数说明
focus	使组件获得焦点	-	-
blur	使组件失去焦点	-	-
select	使组件选中	-	-
clear	使组件清空	-	-

插槽：

插槽名	说明	参数	参数说明
select-display	type为select时的插槽	node	节点数据
option-right	type为select-input时，内容项右侧插槽	data	选项数据
select-input	type为select-input时，提示信息内容插槽	data	选项数据

dynamic-form（动态表单） ​

基础用法 ​

示例： ​

代码示例： ​

属性： ​

事件： ​

方法： ​

插槽： ​

dynamic-form（动态表单）

基础用法

示例：

代码示例：

属性：

事件：

方法：

插槽：