Skip to content
内容大纲
官方QQ交流群
pc端ui:468705115   点此加入
移动端ui:468217742   点此加入
技术交流1:87208295   点此加入
技术交流2:787747122   点此加入
官网
云控制台
开放平台
关注微信公众号
代码仓库: 码云

cv-checkbox-group 多选框

简要

多选框,一般和表单配合使用,默认为实心白色背景。

示例

vue
<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">cv-checkbox-group</view>
      <view class="components-title-d">多选</view>
    </view>
    <cv-form-base ref="refFormBase" :rules="formRules" :model="formData" labelWidth="75" style="padding: 0 10px">
      <cv-form-item label="默认多选" required>
        <cv-checkbox-group v-model="formData.checkbox1" align="right" dataType="text" :dataLists="checkboxLists" />
        <template v-slot:tip>请选择一个你最喜欢的</template>
      </cv-form-item>
      <cv-form-item label="默认多选" required labelPosition="top">
        <cv-checkbox-group v-model="formData.checkbox2" :dataLists="checkboxLists" />
        <template v-slot:tip>请选择一个你最喜欢的</template>
      </cv-form-item>
      <cv-form-item label="标签多选" required>
        <cv-checkbox-group type="tag" v-model="formData.checkbox3" :dataLists="checkboxLists" />
        <template v-slot:tip>请选择一个你最喜欢的</template>
      </cv-form-item>
      <cv-form-item label="标签多选" required labelPosition="top">
        <cv-checkbox-group type="tag" v-model="formData.checkbox3" :dataLists="checkboxLists" />
        <template v-slot:tip>请选择一个你最喜欢的</template>
      </cv-form-item>
    </cv-form-base>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formRules: {},
      formData: {
        checkbox1: ['柠檬', '香蕉'],
        checkbox2: [2],
        checkbox3: ['1', '3']
      },
      checkboxLists: []
    };
  },
  onLoad() {
    setTimeout(() => {
      this.$testReqMock().then((res) => {
        this.checkboxLists = [
          { value: 0, valuea: 'a', text: '橘子' },
          { value: 1, valuea: 'b', text: '柠檬' },
          { value: 2, valuea: 'c', text: '香蕉' },
          { value: 3, valuea: 'd', text: '苹果' },
          { value: 4, valuea: 'e', text: '榴莲' }
        ];
        this.$forceUpdate();
        console.log('模拟请求数据--选项', this.checkboxLists);
      });
    }, 1000);
    setTimeout(() => {
      // this.$testReqMock().then((res) => {
      //   this.formData.checkbox1 = ['柠檬'];
      //   this.formData.checkbox2 = [2, 4];
      //   console.log('模拟请求数据--选中', this.formData);
      // });
    }, 2000);
  },
  methods: {
    bindTimeChange(e) {},
    clickTest(e) {}
  }
};
</script>

属性

属性名类型默认值说明
v-modelArray-双向绑定数据,cv-checkbox-group 类型为:String
dataTypeString'value'数据类型 :['value','text']
dataLists[Array, String]-展示数据
dataValueString'value'dataLists中value的标识
dataLabelString'label'dataLists中text的标识
dataCheckedString'checked'dataLists中checked的标识
max-numberNumber0最大选中数量

Copyright © 2017 10yun.com | 十云提供计算服务-IPV6 | ctocode组开发