# Checkbox复选框

# 默认初始值

使用 med-s-checkbox 标签来定义基本的复选框



 

















<template>
  <div>
      <med-s-checkbox :formLayout="formLayout" :optionList="optionList" :initialValue="initialValue"></med-s-checkbox>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        formLayout:{"labelCol":{"span":6},"wrapperCol":{"span":18}},
        optionList:[{"label":"选项1","value":"0"},{"label":"选项2","value":"1"}],
        initialValue:['0','1']
      }
    }
  }
</script>
<style>

</style>
显示代码

# 无法勾选

使用 med-s-checkbox 标签来定义基本的复选框



 


















<template>
  <div>
    <div >
      <med-s-checkbox :formLayout="formLayout" :optionList="optionList"></med-s-checkbox>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        formLayout:{"labelCol":{"span":6},"wrapperCol":{"span":18}},
        optionList:[{"label":"选项1","value":"0","disabled":true},{"label":"选项2","value":"1"}]
      }
    }
  }
</script>
<style>

</style>
显示代码

# 选中事件回调

我是被点击的那个的值:[]

使用 med-s-checkbox 标签来定义基本的复选框



 

























<template>
  <div>
    <div >
      <med-s-checkbox :formLayout="formLayout" :optionList="optionList" @change="handleChange"></med-s-checkbox>
      <div v-show="val.length">我是被点击的那个的值:{{val}}</div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        formLayout:{"labelCol":{"span":6},"wrapperCol":{"span":18}},
        optionList:[{"label":"选项1","value":"0"},{"label":"选项2","value":"1"}],
        val:[]
      }
    },
    methods:{
      handleChange(val) {
        this.val=val
      }
    }
  }
</script>
<style>

</style>
显示代码

# 参数列表

参数 方式 示例 解释
optionList Prop optionList="[]" 【必填项】选项列表
isFormItem Prop isFormItem="false" || 默认值false 是否是用于表单的,参考表单文档中传参
formLayout Prop formLayout="{ labelCol: { span: 6 }, wrapperCol: { span: 18 }}" isFormItem = true生效,用于表单时的布局,标签和选框的布局
validator Prop validator="(rule, value, cb) => {if (!value) {cb('必填')}cb()}" isFormItem = true生效,用于表单时的校验
change Emit @change="onChange" 选中事件