FormDesc 描述表单

快速的数据化配置一个描述列表布局表单。

基础使用

设置 viewModel 属性可开启查看模式，表单可快速在查看和编辑中切换。

FormDesc 组件的大小继承自表单的 size 属性，排列方向和文本标签对齐方式继自承表单的 labelPosition 属性，文本标签宽度继承自表单的 labelWidth 属性。

点击查看代码

<template>
  <ElForm :model="form.model" label-width="80px" :label-position="(labelPosition as any)" class="demo">
    <AgelFormDesc :items="form.items" :border="border" :view-model="viewModel" title="描述表单">
      <template #extra>
        <div class="flex-center">
          <AgelRadio v-model="labelPosition" :options="['top', 'left', 'right']" style="margin-right: 30px">
          </AgelRadio>
          <ElCheckbox v-model="border">显示边框</ElCheckbox>
          <ElCheckbox v-model="viewModel">视图模式</ElCheckbox>
        </div>
      </template>
    </AgelFormDesc>
  </ElForm>
</template>

<script lang="tsx" setup>
import { reactive, markRaw, ref } from 'vue'

let border = ref(true)
let viewModel = ref(false)
let labelPosition = ref('right')

const form = reactive({
  model: {
    name: 'kooriookami',
    phone: '18100000000',
    addr: '苏州',
    remark: '送货上门',
    rate: 3,
    resource: '顺丰',
    address: '江苏省苏州市吴中区吴中大道 1188 号',
    delivery: true
  },
  items: [
    { prop: 'name', label: '用户名', viewModel: true },
    { prop: 'phone', label: '手机号', required: true },
    { prop: 'addr', label: '居住地' },
    { prop: 'remark', label: '备注' },
    { label: '联系地址', prop: 'address', span: 2 },
    {
      label: '快递',
      prop: 'resource',
      slot: 'agel-radio',
      attrs: {
        options: ['顺丰', '圆通']
      }
    },
    {
      label: '即时配送',
      prop: 'delivery',
      slot: 'el-switch',
      viewFormat: ({ modelValue }: any) => {
        return <el-tag disable-transitions>{modelValue ? '即时' : '延时'}</el-tag>
      }
    },
    {
      label: '评分',
      prop: 'rate',
      slot: 'el-rate',
      viewFormat: ({ modelValue }: any) => modelValue + '星评分'
    },
    {
      label: '照片',
      prop: 'upload',
      viewModel: false,
      slot: 'agel-upload',
      attrs: {
        listType: 'picture-card',
        action: 'xx/xx/'
      }
    }
  ]
})
</script>

属性

属性	类型	默认值	说明
items	ItemProps[]	-	表单配置项
model-prop	string	-	表单 model 键名
scope	object	-	表单项插槽作用域参数
view-model	boolean	-	视图模式，只渲染 value
label-width	string| number	-	label 列宽度
content-width	string| number	-	content 列最小宽度
border	boolean	true	开启边框
column, border, title, extra	-	-	ElDescriptions 属性

ItemProps

属性	类型	默认值	说明
......	-	-	AgelFormItem 属性
span, className, labelClassName	-	-	ElDescriptionsItem 属性

方法

名称	参数	说明
getRef	prop	获取组件实例
validate	(callback)=>Promise	对整个 items 表单进行验证
resetFields	props	重置表单

插槽

名称	插槽作用域	说明
slot-xx	itemProps	item 组件具名插槽
prepend	-	items 前置插槽
append	-	items 后置插槽