taais-web/src/views/index.vue

<template>
  <div class="card content-box">
    <ProForm :items-options="items" :model="model">
      <template #username1="{ formModel }">
        <el-input v-model="formModel.username1" />
      </template>
      <template #transfer1="{ formModel }">
        <el-transfer v-model="formModel.transfer1" :data="dataT" />
      </template>
    </ProForm>
  </div>
</template>

<script setup lang="ts" name="Index">
import ProForm from '@/components/ProForm/index.vue'
let model = {
  username: 'ssss',
  username1: '自定义的插槽',
  sdsds: '1',
  sdssssds: ['1']
}
const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

const optionsData = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`
}))
const dataT = [
  {
    key: 1,
    label: '社么',
    disabled: false
  },
  {
    key: 2,
    label: 'wan',
    disabled: false
  },
  {
    key: 3,
    label: '伊尔',
    disabled: true
  }
]

const treeData = [
  {
    label: '选项1',
    value: '1',
    children: [
      {
        label: '选项1-1',
        value: '1-1'
      },
      {
        label: '选项1-2',
        value: '1-2'
      }
    ]
  },
  {
    label: '选项2',
    value: '2'
  }
]
const enumData = [
  {
    label: '选项1',
    value: '1'
  },
  {
    label: '选项2',
    value: '2'
  },
  {
    label: '选项3',
    value: '3'
  }
]
let items: ProForm.ItemsOptions[] = [
  {
    label: '单行输入框',
    prop: 'username',
    rules: [{ required: true, message: '请选择步长', trigger: 'blur' }],
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入用户名'
    }
  },
  {
    label: '多行输入框',
    prop: 'usernames',
    rules: [{ required: true, message: '请选择步长', trigger: 'blur' }],
    compOptions: {
      elTagName: 'input',
      type: 'textarea',
      clearable: true,
      placeholder: '请输入用户名'
    }
  },
  {
    label: '插槽',
    prop: 'username1',
    required: true,
    tooltip: '这是自定义插槽',
    compOptions: {
      elTagName: 'slot',
      clearable: true,
      placeholder: '请输入用户名'
    }
  },
  {
    label: '单选',
    prop: 'sdsds',
    required: true,
    compOptions: {
      elTagName: 'radio-group',
      enum: enumData
    }
  },
  {
    label: '复选',
    prop: 'sdssssds',
    required: true,
    compOptions: {
      elTagName: 'checkbox-group',
      enum: enumData
    }
  },
  {
    label: '下拉',
    prop: 'select',
    required: true,
    compOptions: {
      elTagName: 'select',
      enum: enumData
    }
  },
  {
    label: '下拉树',
    prop: 'treeSelect',
    required: true,
    compOptions: {
      elTagName: 'tree-select',
      enum: treeData
    }
  },
  {
    label: '虚拟下拉',
    prop: 'selectV2',
    required: true,
    compOptions: {
      elTagName: 'select-v2',
      enum: optionsData
    }
  },
  {
    label: '级联',
    prop: 'jilian',
    compOptions: {
      elTagName: 'cascader',
      enum: treeData,
      props: {
        expandTrigger: 'hover' as const
      }
    }
  },
  {
    label: '日期',
    prop: 'datePicker',
    compOptions: {
      elTagName: 'date-picker',
      type: 'date'
    }
  },
  {
    label: '日期范围',
    prop: 'datePicker',
    compOptions: {
      elTagName: 'date-picker',
      type: 'daterange',
      rangeSeparator: 'To',
      startPlaceholder: 'Start date',
      endPlaceholder: 'End date'
    }
  },
  {
    label: '数字框',
    prop: 'iNumber',
    compOptions: {
      elTagName: 'input-number',
      min: 1
    }
  },
  {
    label: '评分',
    prop: 'rate',
    compOptions: {
      elTagName: 'rate'
    }
  },
  {
    label: '滑块',
    prop: 'slider',
    compOptions: {
      elTagName: 'slider',
      step: 10
    }
  },
  {
    label: '开关',
    prop: 'switch',
    compOptions: {
      elTagName: 'switch'
    }
  },
  {
    label: '时间选择器',
    prop: 'timePicker',
    compOptions: {
      elTagName: 'time-picker'
    }
  },
  {
    label: '时间下拉',
    prop: 'timeSelect',
    compOptions: {
      elTagName: 'time-select'
    }
  },
  {
    label: '穿梭框',
    prop: 'transfer1',
    compOptions: {
      elTagName: 'slot'
    }
  }
]
</script>

<style scoped lang="scss"></style>