Liv Web2文档

Appearance

Form Item 表单项 ​

使用DataForm组件的fields属性足以生成绝大部分类型的表单，如果你想生成更加灵活、个性化的表单可以使用表单项组件。该组件基于ElFormItem封装，通过传入fieldType属性可以快速生成对应的表单内容。

业务注入 ​

在全局注入处理文件相关业务。

注入文件上传地址
ts
app.provide(FILE_UPLOAD_URL_KEY, '/api/file/upload');
注入文件上传header
ts
app.provide(FILE_UPLOAD_HEADER_KEY, {
  Authorization: import.meta.env.VITE_AUTHORIZATION,
  'Blade-Auth': import.meta.env.VITE_BLADE_AUTH,
});
注入文件上传data
ts
app.provide(FILE_UPLOAD_DATA_KEY, {
  action: 'upload',
  rename: true,
  belongOrgId: 'ruralLivingEnv',
  folder: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
  flag: true,
});
注入处理文件上传response业务
ts
app.provide(HANDLE_FILE_RESPONSE_KEY, response => {
  return response.data.fileUrl;
});
注入处理文件地址业务
ts
app.provide(HANDLE_FILE_URLS_KEY, urls => {
  return (
    urls
      ?.split(',')
      ?.map(
        url =>
          `${import.meta.env.VITE_FILE_URL}/ruralLivingEnv/fileControll/downLoadFile?swfName=${url}`,
      ) ?? []
  );
});

基础用法 ​

与fields一起使用 ​

表单项组件支持与fields属性一起使用，默认显示在fields生成的表单项之后，你可以通过fieldIndex属性指定表单项组件显示在第几行。

绑定原始值 ​

表单项组件内部对绑定数据进行了处理，会自动将数据转换为后端需要的格式，如果需要绑定原始值，可以通过.raw修饰符来实现。

网格布局 ​

通过fieldIndex属性，你可以控制表单项显示在第几行，fieldIndex相同表示显示在同一行。

动态表单 ​

相比直接使用fields属性生成表单，使用表单项组件拥有更高的灵活性和扩展性，可以轻松实现复杂的动态表单。下面是一个表单项数据联动示例，根据选中的父级数据字典动态切换子级数据字典的数据。

表单校验 ​

表单项内部封装了默认的校验逻辑，只需传入required属性即可自动生成校验规则。

属性&插槽透传 ​

你可以透传ElFormItem的所有属性，并且可以透传fieldType对应渲染组件的所有属性及插槽。

属性 ​

属性名说明类型默认值
field-type表单项字段类型FormItemFieldType—
field-index表单项下标，用于控制显示在第几行number—

fieldType值对应渲染组件 ​

字段类型说明对应的渲染组件
input输入框ElInput
textarea文本域ElInput
phone2.1.2输入框(带手机号校验)ElInput
idcard2.1.2输入框(带身份证校验)ElInput
ciphertext2.1.0加密输入框ElInput、LivVerify
cipherPhone2.1.2加密输入框(带手机号校验)ElInput、LivVerify
cipherIdcard2.1.2加密输入框(带身份证校验)ElInput、LivVerify
select选择器LivSelect
date日期选择器ElDatePicker
dateRange2.2.0日期范围选择器ElDatePicker
time时间选择器ElTimePicker
timeRange2.2.0时间范围选择器ElTimePicker
datetime2.2.0日期时间选择器ElDatePicker
datetimeRange2.2.0日期时间范围选择器ElDatePicker
radio单选框LivRadio
checkbox多选框LivCheckbox
number数字输入框ElInputNumber
numberRange数组范围LivNumberRange
rate评分ElRate
switch开关ElSwitch
clolor拾色器ElColorPicker
image audio video file图片/音频/视频/文件上传ElUpload
dict dictId字典选择器DictSelect
grid gridId gridCode网格选择器LivGridCascader
location2.1.0地图选点LivLocationPicker
verify2.1.2验证码LivVerify
richText富文本编辑器LivRichText
slot插槽—

插槽 ​

插槽名说明作用域
right表单项右侧内容—