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"	选中事件