# 多选

TIP

2.1.0+

# 普通用法

<avue-form :option="option" v-model="form"></avue-form>
<script>
export default {
    data() {
      return {
        form: {
          checkbox:[0,1]
        },
        option: {
          column: [{
              label: '多选',
              prop: 'checkbox',
              type: 'checkbox',
              span:24,
              dicData:[{
                label:'男',
                value:0
              },{
                label:'女',
                value:1
              },{
                label:'未知',
                value:''
              }]
            }
          ]
        }
      }
    }
}
</script>

Expand Copy

# 全选

配置alltrue

<avue-form :option="option" v-model="form"></avue-form>
<script>
export default {
    data() {
      return {
        form: {
          checkbox:[0,1]
        },
        option: {
          column: [{
              label: '多选',
              prop: 'checkbox',
              type: 'checkbox',
              all:true,
              span:24,
              dicData:[{
                label:'男',
                value:0
              },{
                label:'女',
                value:1
              },{
                label:'未知',
                value:''
              }]
            }
          ]
        }
      }
    }
}
</script>

Expand Copy

# 数量限制

使用minmax属性能够限制可以被勾选的项目的数量。

<avue-form :option="option" v-model="form"></avue-form>
<script>
export default {
    data() {
      return {
        form: {
          checkbox:[0]
        },
        option: {
          column: [{
              label: '空心多选',
              prop: 'checkbox',
              span:24,
              type: 'checkbox',
              border:true,
              min:1,
              max:2,
              dicData:[{
                label:'男',
                value:0
              },{
                label:'女',
                value:1
              },{
                label:'未知',
                value:''
              }]
            }
          ]
        }
      }
    }
}
</script>

Expand Copy

# 按钮样式

配置buttontrue

<avue-form :option="option" v-model="form"></avue-form>
<script>
export default {
    data() {
      return {
        form: {
          checkbox:[0,1],
        },
        option: {
          column: [{
              label: '实心多选',
              prop: 'checkbox',
              type: 'checkbox',
              span:24,
              button:true,
              dicData:[{
                label:'男',
                value:0
              },{
                label:'女',
                value:1
              },{
                label:'未知',
                value:''
              }]
            }
          ]
        }
      }
    }
}
</script>

Expand Copy

# 空心样式

配置bordertrue

<avue-form :option="option" v-model="form"></avue-form>
<script>
export default {
    data() {
      return {
        form: {
          checkbox:[0,1]
        },
        option: {
          column: [{
              label: '空心多选',
              prop: 'checkbox',
              span:24,
              type: 'checkbox',
              border:true,
              dicData:[{
                label:'男',
                value:0
              },{
                label:'女',
                value:1
              },{
                label:'未知',
                value:''
              }]
            }
          ]
        }
      }
    }
}
</script>

Expand Copy
Last Updated: 8/5/2021, 9:04:57 AM