cv-checkbox-all 多选框

简要

多项选择
带全选按钮的多选框，一般和表单配合使用，默认为实心白色背景。

示例

::: demo

<template>
  <div style="width: 520px">
    <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px">
      <h1>checkbox 组件</h1>

      <p>带有全选按钮的多选框</p>
      <h3>多选-全选</h3>

      <cv-checkbox-all v-model="formData.checkboxall" :dataLists="dataLists" />
      <h3>多选-全选</h3>

      <cv-checkbox-all v-model="formData.checkboxall" :dataLists="dataLists" disabled />
      <p>log表单信息</p>
    </div>
    <cv-btn-base @click="hanldeSubmit">按钮</cv-btn-base>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        checkboxall: ['']
      },
      dataLists: [
        { label: '北京' },
        { label: '上海', disabled: 'true' },
        { label: '广州', checked: true },
        { label: '深圳' },
        { label: '杭州' }
      ]
    };
  },
  methods: {
    hanldeSubmit() {
      console.log('最后的formData', this.formData);
    }
  }
};
</script>

:::

属性

属性名	类型	默认	说明	可选值
dataLists	Array	-		-
dataField	Object	-		-
label	String	-	字段名	-
labelWidth	String	80px	字段区域宽度，上下排列无效	-
v-model	String	-	数据双向绑定	-
tip	String	-	字段提示/说明	-
col	Number	24	指定在一行中占据的宽度比，默认占满一行	-
offset	Number	0	指定左侧间隔的栏数	-
rules	String	-	验证规则	-
size	String	-	尺寸	medium / small / mini
disabled	Boolean	-	禁用选项	-

• [ dataLists ] 说明
  设置选项，默认格式为 {label:"选项1",value:"1"} ，label 作为选项名，value 作为选中的返回值

• [ dataField ] 说明
  自定数据字段，如果你的数据是这种格式 {text:"选项1",val:"1"} ，只需要用该属性 传入 {label:"text",value:"val"} 组件会将 text 作为 label ，val 作为 value 进行渲染