Vol开发文档3.5

表单参数

属性	说明	类型	默认
loadKey	是否自动绑定 select/checkboxt 等标签的数据源	bool	true
labelWidth	左边标签宽度	number	100
labelPosition	表单标签显示位置	string	top/left
formFields	表单字段存的值，如:{name:'admin',age:18}	json
formRules	表单字段配置信息（注意formRules是二维数组）	array

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>})` 见上面【完整表单配置】
labelStyle	自定义标题样式,`labelStyle: "color:red;font-weight:700"` 见上面【完整表单配置】
label	是否只读，并且内容显示为纯文本	bool	false
inputStyle	输入框或者只读的自定义样式，`inputStyle: { color: "#f50000" }, //设置输入框样式`	bool	false
hidden	隐藏字段配置	bool
required	是否必填	bool	false
format	日期自定义显示的格式，如:YYYY-MM-DD	string
filter	启用搜索,只对 `select/selectList` 生效,默认下拉框数据源超出 10 个开启搜索 bool	false
type	渲染的标签类型,可选值,`mail、text、textarea、img、checkbox、number、decimal、date、datetime、phone、switch、select、selectList(多选下拉框)、label(纯文本显示,selectTable、selectTree、treeSelect(树形级联))、cascader`	string	text
placeholder	输入框占位提示字符	string
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 =\> {}}` 见上面【完整表单配置】	string
minRows	textarea 标签最小高度	number	2
maxRows	textarea 标签最大高度	number	10
itemStyle	指定表单宽度(表单字段占的宽度)`itemStyle :'width:300px'`	string
colSize	指定表单宽度(表单字段占的宽度)，可选值:12,8,6,如果是 12 标签会占 100%宽度	number
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
}]]	表单字段 formRules 的参数配置说明
数据槽 slot	可以在表单的第一行第前使用或最后一行

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

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.formRef.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