Vol开发文档3.5

表单参数

属性	说明	类型	默认
loadKey	是否自动绑定 select/checkbox 等标签的数据源	bool	true
labelWidth	左边标签宽度	number	90
labelPosition	表单标签显示位置,可选值:top(顶部)、left(左侧)	string
formFields	表单字段存的值，如:{name:'admin',age:18}	json	{}
formRules	表单字段配置信息（注意formRules是二维数组）	array	[]
select2Count	下拉框超出数量显示select2组件	number	1500
eventNext	按回车后是否自动跳转到下一个标签	bool	false

formRules表单字段配置信息

属性	说明	类型	默认
[[{	表单字段 formRules 的参数配置说明
title	标题名称	string
field	字段，与表单字段必须相同	string
dataKey	数据源字典编号(菜单->系统->下拉框绑定中的字典编号)	string
data	数据源，`可以手动绑定格式[{key:1,value:'是',hidden:false,disabled:false}],(hidden 下拉框选项是否隐藏,disabled 下拉框选项是否禁用),也可以自动绑定`	array	[]
render	支持 vue 原生 render 处理,见上面表单示例具体使用`render: (h) => {return <div>显示内容</div>}` 见上面【完整表单配置】	function
readonly	是否只读	bool	false
labelRender	自定义标题及事件 `labelRender: (h, {}) => {return <div>显示内容</div>})` 见上面【完整表单配置】	function
onKeyPress	输入事件：只对 `input/textarea/decimal` 数字输入框生效,onKeyPress:($event)=> { if ($event.keyCode == 13) {} }	function
onChange	下拉框、日期选择事件,仅对 `select、date、datetime、checkbox、switch、级联组件生效`; onChange: (value, data, isClear) => {}	function
blur	表单失去焦点事件`blur:()=>{}`	function
focus	表单获取焦点事件`focus:()=>{}`	function
labelStyle	自定义标题样式,`labelStyle: "color:red;font-weight:700"` 见上面【完整表单配置】	string
label	是否只读，并且内容显示为纯文本	bool	false
inputStyle	输入框或者只读的自定义样式，`inputStyle: { color: "#f50000" }, //设置输入框样式`	json
hidden	隐藏字段配置	bool
required	是否必填	bool	false
format	日期自定义显示的格式，如:YYYY-MM-DD	string
filter	启用搜索,只对 `select/selectList` 生效,默认下拉框数据源超出 10 个开启搜索 bool	false
type	渲染的标签类型,可选值:`input、textarea、img、file、excel、number、decimal、date、datetime、month、year、time、color、switch、select、selectList(多选下拉框)、selectTable、selectBox、selectTree、treeSelect(树形级联)、cascader、radio、checkbox、label(纯文本显示)、password(密码输入框)、rate(评分)、editor(富文本编辑器)、range(范围输入)`	string	input
disabled	是否禁用	bool	false
valueFormat	日期值的格式,如:YYYY-MM-DD、YYYY-MM-DD HH:mm:ss	string
precision	数字输入框小数位数,只对`type:"decimal"生效`	int
col	指定表单宽度(与colSize相同)	number
filterMethod	自定义筛选方法,`filterMethod(val){}`	function
autocomplete	下拉框是否可手动输入内容(select、selectList)	bool	false
multiple	树形下拉框是否多选(treeSelect、cascader)	bool	true
checkCtrictly	树形选择是否严格模式(级联只能选择最后一级)	bool	true
changeOnSelect	级联选择器是否改变时选择(与checkStrictly相同)	bool	false
height	富文本编辑器高度	number
desc	上传组件描述文本	string
maxFile	上传组件最大文件数	number
maxSize	上传组件最大文件大小(单位:MB)	number
autoUpload	上传组件是否自动上传	bool	false
fileTypes	上传组件允许的文件类型,如:`fileTypes: ['.jpg', '.png']`	array	[]
uploadBefore	上传前方法`uploadBefore(file, callBack){}`	function
uploadAfter	上传后方法`uploadAfter(file, result){}`	function
imgOption	上传组件图片选项配置	json
fileClick	文件点击事件`fileClick(file, index){}`	function
removeBefore	删除文件前方法`removeBefore(file, callBack){}`	function
downLoad	是否可下载文件	bool	false
columnType	列类型(用于上传组件判断是否为图片)	string
predefine	颜色选择器预定义颜色数组	array
showAlpha	颜色选择器是否显示透明度	bool	false
activeText	switch标签选中的文本	string	是
inactiveText	switch标签未选中的文本	string	否
placeholder	输入框占位提示字符	string
prefixIcon	输入框前缀图标,如:`prefixIcon: "el-icon-search"`	string
suffixIcon	输入框后缀图标,如:`suffixIcon: "el-icon-search"`	string
formatter	输入框格式化函数(自定义格式化显示输入框内容),`formatter: (val) => {return val}`	function
position	数字输入框控制按钮位置,可选值:right(右侧)、left(左侧)	string	right
range	显示两个输入框(范围输入)	bool	false
min	字段如果是数字，会自动验证数字最大、小值；如果是字符串, 会验证字符长度，如果日期，会限制日期可选范围) number
max	最大值,操作与 min 相同	number
validator	对标签的值进行自定义验证，如： `validator: (rule, val, callback)=> { if (val != '234') { return '必须输入234'; } return ''; }`	function
extra	添加额外标签： `extra: {//样式 style: "color:red",//显示图标 icon: "ios-search", //显示文本 text: "点击可触发事件",//触发事件 click: (item, value) => {},//自定义渲染 render: (h) => {return <div>显示内容</div>}}` 见上面【完整表单配置】	json
minRows	textarea 标签最小高度	number	2
maxRows	textarea 标签最大高度	number	10
itemStyle	指定表单宽度(表单字段占的宽度)`itemStyle :'width:300px'`	string
colSize	指定表单宽度(表单字段占的宽度)，可选值:12,8,6,如果是 12 标签会占 100%宽度	number
}]]	表单字段 formRules 的参数配置说明

表单方法(校验、重置、清除校验)

vue3代码

<template>
  <vol-form ref="formRef" :formFields="formFields" :formRules="formRules">
    <el-button @click="validate">获取表单</el-button>
    <el-button @click="reset">重置表单</el-button>
    <el-button @click="clear">清除校验提示</el-button>
  </vol-form>
</template>
<script lang="jsx" setup>
import { ref, reactive, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const formRef = ref(null)
//表单字段值
const formFields = reactive({ price: null })
//表单配置formRules数据格式是二维数组，表示每个标签所在位置:[[{},{}]]
const formRules = reactive([[{ type: 'decimal', title: '单价', required: true, field: 'price' }]])
//表单校验
const validate = () => {
  formRef.value.validate(() => {
    proxy.$message.success('校验成功')
  })
}
//重置表单，重置时可指定重置的值，如果没有指定重置的值，默认全部清空
const reset = () => {
  let data = { decimalVal: 100, numberVal: 100 }
  formRef.value.reset(data)
  proxy.$message.error('表单已重置')
}
//清除校验提示信息
const clear = () => {
  formRef.value.$refs.volform.clearValidate()
}
</script>

vue2代码

<template>
  <vol-form ref="formRef" :formFields="formFields" :formRules="formRules">
    <el-button @click="validate">获取表单</el-button>
    <el-button @click="reset">重置表单</el-button>
    <el-button @click="clear">清除校验提示</el-button>
  </vol-form>
</template>
<script lang="jsx">
import VolForm from '@/components/basic/VolForm.vue'
export default {
  components: {
    VolForm
  },
  data() {
    return {
      formFields: {
        price: null
      },
      //表单配置formRules数据格式是二维数组，表示每个标签所在位置:[[{},{}]]
      formRules: [[{ type: 'decimal', title: '单价', required: true, field: 'price' }]]
    }
  },
  methods: {
    validate() {
      this.$refs.formRef.validate(() => {
        this.$message.success('校验成功')
      })
    },
    reset() {
      //重置表单，重置时可指定重置的值，如果没有指定重置的值，默认全部清空
      let data = { decimalVal: 100, numberVal: 100 }
      this.$refs.formRef.reset(data)
      this.$message.error('表单已重置')
    },
    clear() {
      //清除校验提示信息
      this.$refs.formRef.$refs.volform.clearValidate()
    }
  }
}
</script>

表单参数

formRules表单字段配置信息

表单方法(校验、重置、清除校验)

ON THIS PAGE