Array数组框

基础用法

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

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '数组框',
            prop: 'array',
            type: 'array'
          }
        ]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

默认值

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

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '数组框',
            prop: 'array',
            type: 'array',
            value: [0, 1]
          }
        ]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

最大限制

limit限制最大个数

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '数组框',
            prop: 'array',
            type: 'array',
            limit: 3,
            value: [0, 1, 2]
          }
        ]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

禁用状态

通过disabled属性指定是否禁用

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '数组框',
            prop: 'array',
            type: 'array',
            disabled: true,
            value: [0, 1]
          }
        ]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

图片框

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

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        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>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '超链接框',
            prop: 'array',
            type: 'url',
            value: ['http://avuejs.com']
          },
          {
            label: '单个超链接框',
            prop: 'array',
            alone: true,
            type: 'url',
            value: ['http://avuejs.com']
          }
        ]
      }
    }
  }
}
</script>

显示代码复制代码复制代码