基础用法

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

vue2

vue3

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

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

网络字典

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

vue2

vue3

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

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

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

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

默认值

vue2

vue3

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

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

禁用状态

vue2

vue3

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

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

禁用选项

vue2

vue3

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

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

全选

vue2

vue3

配置`all`为`true`

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

数量限制

vue2

vue3

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

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

按钮样式

vue2

vue3

配置`button`为`true`

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

空心样式

vue2

vue3

配置`border`为`true`

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