Select

• 示例
  • 基础 Select
  • 可搜索 Select
  • 多选 Select
  • 分组 Select
  • 创建条目 Select
  • 自定义模板 Select
  • 表单校验
• select 的 formItem 配置

示例

基础 Select

select

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

let dynamicForm = reactive({
  form: [
    {
      name: 'select',
      label: 'select',
      value: null,
      options: [
        { label: 'label1', value: 'value1' },
        { label: 'label2', value: 'value2' },
      ],
      element: 'select',
      attr: {
        placeholder: '这是一个select',
      },
    },
  ],
})

function submit(value) {
  console.log(value)
}
</script>

<template>
  <ins-form :dynamicForm="dynamicForm" @save="submit" />
</template>

显示代码

复制代码片段

可搜索 Select

可搜索

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

let dynamicForm = reactive({
  form: [
    {
      name: 'filterSelect',
      label: '可搜索',
      value: null,
      options: [
        { label: 'label1', value: 'value1' },
        { label: 'label2', value: 'value2' },
      ],
      element: 'select',
      attr: {
        filterable: true,
      },
    },
  ],
})

function submit(value) {
  console.log(value)
}
</script>

<template>
  <ins-form :dynamicForm="dynamicForm" @save="submit" />
</template>

显示代码

复制代码片段

多选 Select

多选

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

let dynamicForm = reactive({
  form: [
    {
      name: 'multiSelect',
      label: '多选',
      value: [],
      options: [
        { label: 'label1', value: 'value1' },
        { label: 'label2', value: 'value2' },
      ],
      element: 'select',
      attr: {
        multiple: true,
        'collapse-tags': true,
      },
    },
  ],
})

function submit(value) {
  console.log(value)
}
</script>

<template>
  <ins-form :dynamicForm="dynamicForm" @save="submit" />
</template>

显示代码

复制代码片段

分组 Select

分组

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

let dynamicForm = reactive({
  form: [
    {
      name: 'selectGroup',
      label: '分组',
      value: null,
      element: 'select',
      elementType: 'group',
      options: [
        {
          label: '分组1',
          options: [
            { label: 'label1-1', value: 'value1-1' },
            { label: 'label1-2', value: 'value1-2' },
          ],
        },
        {
          label: '分组2',
          options: [
            { label: 'label2-1', value: 'value2-1' },
            { label: 'label2-2', value: 'value2-2' },
          ],
        },
      ],
    },
  ],
})

function submit(value) {
  console.log(value)
}
</script>

<template>
  <ins-form :dynamicForm="dynamicForm" @save="submit" />
</template>

显示代码

复制代码片段

创建条目 Select

创建条目

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

let dynamicForm = reactive({
  form: [
    {
      name: 'createSelect',
      label: '创建条目',
      value: null,
      element: 'select',
      options: [
        { label: 'label1', value: 'value1' },
        { label: 'label2', value: 'value2' },
      ],
      attr: {
        filterable: true,
        'allow-create': true,
      },
    },
  ],
})

function submit(value) {
  console.log(value)
}
</script>

<template>
  <ins-form :dynamicForm="dynamicForm" @save="submit" />
</template>

显示代码

复制代码片段

自定义模板 Select

自定义模板

<script setup>
import { reactive, h } from 'vue'

const optionComponent = (props, context) => {
  return h(
    'div',
    {
      style: {
        display: 'flex',
        'align-item': 'center',
        'justify-content': 'space-between',
      },
    },
    [h('span', {}, props.option.label), h('span', {}, props.option.desc)]
  )
}

let dynamicForm = reactive({
  form: [
    {
      name: 'userDefinedSelect',
      label: '自定义模板',
      value: null,
      element: 'select',
      options: [
        { label: 'label1', value: 'value1', desc: 'desc1' },
        { label: 'label2', value: 'value2', desc: 'desc2' },
      ],
      optionsItem: optionComponent,
    },
  ],
})

function submit(value) {
  console.log(value)
}
</script>

<template>
  <ins-form :dynamicForm="dynamicForm" @save="submit" />
</template>

显示代码

复制代码片段

表单校验

select

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

let dynamicForm = reactive({
  form: [
    {
      name: 'select',
      label: 'select',
      value: null,
      element: 'select',
      options: [
        { label: 'label1', value: 'value1' },
        { label: 'label2', value: 'value2' },
      ],
      rules: [{ required: true, trigger: 'change' }],
    },
  ],
})

function submit(value) {
  console.log(value)
}
</script>

<template>
  <ins-form :dynamicForm="dynamicForm" @save="submit" />
</template>

显示代码

复制代码片段

select 的 formItem 配置

属性	说明	可选值	默认值
elementType	二级类型	select、group	select
optionsItem	自定义的 option 组件	—	—

🎉 其他参考通用配置