基础用法

vue2

vue3

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

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

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

默认值

vue2

vue3

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

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

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

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

最大限制

vue2

vue3

`limit`限制最大个数

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

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

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

禁用状态

vue2

vue3

通过`disabled`属性指定是否禁用

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

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

图片框

vue2

vue3

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

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

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

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

超链接框

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-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>