Array数组框

基础用法

效果预览可直接操作下方示例

通过将type属性的值指定为array

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>
<script setup>
import { ref } from 'vue'

const option = ref({
  column: [
    {
      label: '数组框',
      prop: 'array',
      type: 'array'
    }
  ]
})
</script>

默认值

效果预览可直接操作下方示例

value属性可以提供一个初始化的默认值

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

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

const option = ref({
  column: [
    {
      label: '数组框',
      prop: 'array',
      type: 'array',
      value: [0, 1]
    }
  ]
});
</script>

最大限制

效果预览可直接操作下方示例

limit限制最大个数

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

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

const option = ref({
  column: [
    {
      label: '数组框',
      prop: 'array',
      type: 'array',
      limit: 3,
      value: [0, 1, 2]
    }
  ]
});
</script>

禁用状态

效果预览可直接操作下方示例

通过disabled属性指定是否禁用

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>
<script setup>
import { ref } from 'vue'

const option = ref({
  column: [
    {
      label: '数组框',
      prop: 'array',
      type: 'array',
      disabled: true,
      value: [0, 1]
    }
  ]
})
</script>

图片框

效果预览可直接操作下方示例

通过将type属性的值指定为img

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

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

const option = ref({
  column: [
    {
      label: '图片框',
      prop: 'array',
      type: 'img',
      value: ['/images/logo.png']
    },
    {
      label: '单个图片框',
      prop: 'array',
      alone: true,
      type: 'img',
      value: ['/images/logo.png']
    }
  ]
});
</script>

超链接框

效果预览可直接操作下方示例

通过将type属性的值指定为url

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

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

const option = ref({
  column: [
    {
      label: '超链接框',
      prop: 'array',
      type: 'url',
      value: ['http://avuejs.com']
    },
    {
      label: '单个超链接框',
      prop: 'array',
      alone: true,
      type: 'url',
      value: ['http://avuejs.com']
    }
  ]
});
</script>