AIoT前端基础组件文档

Appearance

Return to top
On this page

CommonForm 简单表单

基础用法

姓名
性别
年龄
出生日期
爱好
婚否
个人简介
<template>
  <div class="__common-layer-bread">
    <common-form :forms="forms" :propsMap="propsMap" v-model="selectValue"></common-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selectValue = ref('');
const options = ref([
  {name: '选项1', id:'option1'},
  {name: '选项2', id:'option2'},
  {name: '选项3', id:'option3'},
])
const propsMap = ref({
  label:'name',
  value:'id'
})
const forms = ref([
  {label:'姓名', name:'name', type:'input', value:''},
  {label:'性别', name:'',value:'', type:'select', attrs: {options: options.value, propsMap: propsMap.value}},
  {label:'年龄', name:'age',value:'', type:'input-num'},
  {label:'出生日期', name:'birthday', type:'date-picker', value:''},
  {label:'爱好', name:'like', type:'check-group', value:'', attrs: {
    options: [
      {label:'骑行', value:'bike'},
      {label:'美食', value:'food'},
      {label:'影视', value:'vedio'},
    ],
    isCheckAll: true,
    checkAllLabel: '全部选择'
  } },
  {label:'婚否', name:'marry', type:'switch', value:''},
  {label:'个人简介',span: 24, name:'info', type:'textarea', value:''},
])

</script>



<template>
  <div class="__common-layer-bread">
    <common-form :forms="forms" :propsMap="propsMap" v-model="selectValue"></common-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selectValue = ref('');
const options = ref([
  {name: '选项1', id:'option1'},
  {name: '选项2', id:'option2'},
  {name: '选项3', id:'option3'},
])
const propsMap = ref({
  label:'name',
  value:'id'
})
const forms = ref([
  {label:'姓名', name:'name', type:'input', value:''},
  {label:'性别', name:'',value:'', type:'select', attrs: {options: options.value, propsMap: propsMap.value}},
  {label:'年龄', name:'age',value:'', type:'input-num'},
  {label:'出生日期', name:'birthday', type:'date-picker', value:''},
  {label:'爱好', name:'like', type:'check-group', value:'', attrs: {
    options: [
      {label:'骑行', value:'bike'},
      {label:'美食', value:'food'},
      {label:'影视', value:'vedio'},
    ],
    isCheckAll: true,
    checkAllLabel: '全部选择'
  } },
  {label:'婚否', name:'marry', type:'switch', value:''},
  {label:'个人简介',span: 24, name:'info', type:'textarea', value:''},
])

</script>

配置参数

参数说明类型是否必须
formsform表单项，支持各种表单元素的简单结合Array[]true
---- label表单元素中文显示Stringtrue
---- value表单元素v-model绑定值String Array, Booleantrue
---- type目前暂时支持的表单元素类型有： input/textarea/select/input-num/radio/cascader/switch/checkbox/check-group/date-pickerStringtrue
---- attrs表单元素v-bind属性，支持原本element-plus中表单元素属性，另外对部分表单元素进行封装，支持自定义属性传递。下面有单独对自定义封装表单元素进行讲解Obkectfalse

原始参数支持:

select扩展参数

支持以v-bind 的形式传入对象，实现原始el-select所有属性，方法等的支持，如下例所示：


<template>
  <common-select 
    v-bind="selectAttrabute" 
    :options="options" 
    :propsMap="propsMap" 
    v-model="selectValue"
    @change="changeEvent"
    ></common-select>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance();

const selectValue = ref('');

const selectAttrabute = ref({
  disabled: true,
  multiple: true,
  disabled: false,
  'collapse-tags-tooltip': true,
  effect:'light'
})
const options = ref([
  {name: '选项1', id:'option1'},
  {name: '选项2', id:'option2'},
  {name: '选项3', id:'option3'},
])


const propsMap = ref({
  label:'name',
  value:'id'
})

// change事件
function changeEvent(value) {
  proxy.$message(`当前选项${value} `)
}

</script>



<template>
  <common-select 
    v-bind="selectAttrabute" 
    :options="options" 
    :propsMap="propsMap" 
    v-model="selectValue"
    @change="changeEvent"
    ></common-select>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance();

const selectValue = ref('');

const selectAttrabute = ref({
  disabled: true,
  multiple: true,
  disabled: false,
  'collapse-tags-tooltip': true,
  effect:'light'
})
const options = ref([
  {name: '选项1', id:'option1'},
  {name: '选项2', id:'option2'},
  {name: '选项3', id:'option3'},
])


const propsMap = ref({
  label:'name',
  value:'id'
})

// change事件
function changeEvent(value) {
  proxy.$message(`当前选项${value} `)
}

</script>
参数说明类型是否必须
optionsform表单项，支持各种表单元素的简单结合Array[]true
---- label表单元素中文显示Stringtrue
---- value表单元素v-model绑定值String Array, Booleantrue
propsMaplabel,value的映射对象，可以通过该属性与label，value进行映射，从而不限制实际使用时options中正常应该显示的文字及选中后回传的value值Objectfalse

checkBoxGroup字段 


<template>
  <common-check-group
    :options="options" 
    :checkAllLabel="'全部选中'"
    :isCheckAll="true" 
    v-model="selectValue"
    @change="changeEvent"
    ></common-check-group>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance();

const selectValue = ref('');


const options = ref([
  {label: '选项1', value:'option1'},
  {label: '选项2', value:'option2'},
  {label: '选项3', value:'option3'},
])


const propsMap = ref({
  label:'name',
  value:'id'
})

// change事件
function changeEvent(value) {
  proxy.$message(`当前选项${value} `)
}

</script>



<template>
  <common-check-group
    :options="options" 
    :checkAllLabel="'全部选中'"
    :isCheckAll="true" 
    v-model="selectValue"
    @change="changeEvent"
    ></common-check-group>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance();

const selectValue = ref('');


const options = ref([
  {label: '选项1', value:'option1'},
  {label: '选项2', value:'option2'},
  {label: '选项3', value:'option3'},
])


const propsMap = ref({
  label:'name',
  value:'id'
})

// change事件
function changeEvent(value) {
  proxy.$message(`当前选项${value} `)
}

</script>
参数说明类型是否必须
optionsform表单项，支持各种表单元素的简单结合Array[]true
---- label表单元素中文显示Stringtrue
---- value表单元素v-model绑定值String Array, Booleantrue
isCheckAll是否展示全选/全不选 的checkboxBooleanfalse
checkAllLabel如果isCheckAll为true时，展示的全选/全不选的文字Stringfalse