Checkbox多选框

基础用法

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

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

通过将type属性的值指定为checkbox,同时配置dicData为字典值

正在加载示例…

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

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

const option = ref({
  column: [{
    label: '多选',
    prop: 'checkbox',
    type: 'checkbox',
    dicData: [{
      label: '男',
      value: 0
    }, {
      label: '女',
      value: 1
    }, {
      label: '未知',
      value: ''
    }]
  }]
});
</script>

网络字典

更多用法参考表单数据字典

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

配置dicUrl指定后台接口的地址

正在加载示例…

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

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

const option = ref({
  column: [{
    label: '多选框',
    prop: 'checkbox',
    type: 'checkbox',
    props: {
      label: 'name',
      value: 'code'
    },
    dicUrl: 'https://api.avuejs.com/area/getProvince'
  }]
});
</script>

默认值

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

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

正在加载示例…

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

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

const option = ref({
  column: [
    {
      label: '多选框',
      prop: 'checkbox',
      type: 'checkbox',
      dicData: [
        {
          label: '男',
          value: 0
        },
        {
          label: '女',
          value: 1
        },
        {
          label: '未知',
          value: ''
        }
      ],
      value: [0]
    }
  ]
});
</script>

禁用状态

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

通过disabled属性指定是否禁用

正在加载示例…

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

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

const option = ref({
  column: [
    {
      label: '多选框',
      prop: 'checkbox',
      type: 'checkbox',
      dicData: [
        {
          label: '男',
          value: 0
        },
        {
          label: '女',
          value: 1
        },
        {
          label: '未知',
          value: ''
        }
      ],
      disabled: true
    }
  ]
});
</script>

禁用选项

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

返回的字典中数据配置disabled属性指定是否禁用

正在加载示例…

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

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

const option = ref({
  column: [
    {
      label: '多选框',
      prop: 'checkbox',
      type: 'checkbox',
      dicData: [
        {
          label: '男',
          value: 0
        },
        {
          label: '女',
          value: 1,
          disabled: true
        },
        {
          label: '未知',
          value: ''
        }
      ]
    }
  ]
});
</script>

全选

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

配置all为true

正在加载示例…

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

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

const option = ref({
  column: [{
    label: '多选',
    prop: 'checkbox',
    type: 'checkbox',
    all: true,
    dicData: [{
      label: '男',
      value: 0
    }, {
      label: '女',
      value: 1
    }, {
      label: '未知',
      value: ''
    }]
  }]
});
</script>

数量限制

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

使用min和max属性能够限制可以被勾选的项目的数量。

正在加载示例…

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

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

const option = ref({
  column: [
    {
      label: '空心多选',
      prop: 'checkbox',
      type: 'checkbox',
      min: 0,
      max: 2,
      dicData: [
        {
          label: '男',
          value: 0
        },
        {
          label: '女',
          value: 1
        },
        {
          label: '未知',
          value: ''
        }
      ]
    }
  ]
});
</script>

按钮样式

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

配置button为true

正在加载示例…

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

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

const form = ref({
  checkbox: [0, 1],
});

const option = ref({
  column: [{
    label: '实心多选',
    prop: 'checkbox',
    type: 'checkbox',
    button: true,
    dicData: [{
      label: '男',
      value: 0
    }, {
      label: '女',
      value: 1
    }, {
      label: '未知',
      value: ''
    }]
  }]
});
</script>

空心样式

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

配置border为true

正在加载示例…

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

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

const option = ref({
  column: [{
    label: '空心多选',
    prop: 'checkbox',
    type: 'checkbox',
    border: true,
    dicData: [{
      label: '男',
      value: 0
    }, {
      label: '女',
      value: 1
    }, {
      label: '未知',
      value: ''
    }]
  }]
});
</script>