多选框（form-checkbox） | ITRITON开发文档

# 多选框（form-checkbox）

一组备选项中进行多选

# 基础用法

单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。

在 checkbox 元素中定义 v-model 绑定变量，options为选项数据。

<template>
  <itv-form>
    <itv-form-checkbox label="水果" :options="options" v-model="form.value" prop="value"></itv-form-checkbox>
  </itv-form>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          { label: "苹果", value: "1" },
          { label: "香蕉", value: "2" },
          { label: "葡萄", value: "3" }
        ],
        form: {
          value: []
        }
      };
    }
  };
</script>

Copy

# 禁用状态

多选框不可用状态。

部分禁用

全部禁用

设置 disabled 属性即可。

<template>
  部分禁用
  <itv-form>
    <itv-form-checkbox label="水果" :options="options" v-model="form.value" prop="value"></itv-form-checkbox>
  </itv-form>
  全部禁用
  <itv-form>
    <itv-form-checkbox label="水果" :options="options" v-model="form.value" prop="value" disabled></itv-form-checkbox>
  </itv-form>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          { label: "苹果", value: "1" },
          { label: "香蕉", value: "2" },
          { label: "葡萄", value: "3", disabled: true }
        ],
        form: {
          value: ["1"]
        }
      };
    }
  };
</script>

Copy

# 自定义用法

自定义样式显示文本信息。

<template>
  <itv-form>
    <itv-form-checkbox label="水果" :options="options" v-model="form.value" prop="value">
      <template v-slot="{data}">{{data}}</template>
    </itv-form-checkbox>
  </itv-form>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          { label: "苹果", value: "1" },
          { label: "香蕉", value: "2" },
          { label: "葡萄", value: "3", disabled: true }
        ],
        form: {
          value: ["1"]
        }
      };
    }
  }
</script>

Copy

# 带有边框

设置 border 属性可以渲染为带有边框的多选框。

<template>
  <itv-form>
    <itv-form-checkbox label="水果" :options="options" v-model="form.value" prop="value" border></itv-form-checkbox>
  </itv-form>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          { label: "苹果", value: "1" },
          { label: "香蕉", value: "2" },
          { label: "葡萄", value: "3", disabled: true }
        ],
        form: {
          value: ["1"]
        }
      };
    }
  };
</script>

Copy

# Attributes

TIP

默认继承FormItem基础属性FormItem组件。

参数	说明	类型	可选值	默认值
options	Array	[]	选项数据
value / v-model	绑定值	array	—	—
size	多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效	string	medium / small / mini	—
disabled	是否禁用	boolean	—	false
border	是否显示边框	boolean	—	false

# Events

事件名称	说明	回调参数
change	当绑定值变化时触发的事件	更新后的值

# Props

属性名	类型	默认值	说明
value	String	id	主键（唯一值）
label	String	label	文本
disabled	String	disabled	禁用

← 单选框（form-radio）开关（form-switch） →