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-model | Array | - | 双向绑定数据,cv-checkbox-group 类型为:String |
dataType | String | 'value' | 数据类型 :['value','text'] |
dataLists | [Array, String] | - | 展示数据 |
dataValue | String | 'value' | dataLists中value的标识 |
dataLabel | String | 'label' | dataLists中text的标识 |
dataChecked | String | 'checked' | dataLists中checked的标识 |
max-number | Number | 0 | 最大选中数量 |