Element Plus Pro

Appearance

多选框组 Pro ​

对多选框组进行扩展。

基础用法 ​

size="small"

size="default"

size="large"

示例代码 ​

vue
<script setup>
import { ref, reactive } from 'vue'
import { ProCheckboxGroup } from '../../../../packages/components'
import 'element-plus/dist/index.css'

const state = reactive({
  checkboxValue1: [],
  checkboxValue2: [],
  checkboxValue3: [],
  checkboxData: [
    { label: '北京', value: 'beijing' },
    { label: '上海', value: 'shanghai' },
    { label: '广州', value: 'guangzhou' },
    { label: '杭州', value: 'hangzhou' }
  ]
})
</script>

<template>
  <h4>size="small"</h4>
  <ProCheckboxGroup :data="state.checkboxData" v-model="state.checkboxValue1" size="small" />
  <h4>size="default"</h4>
  <ProCheckboxGroup :data="state.checkboxData" v-model="state.checkboxValue2" size="default" />
  <h4>size="large"</h4>
  <ProCheckboxGroup :data="state.checkboxData" v-model="state.checkboxValue3" size="large" />
</template>

<style lang="scss" scoped>
h4 {
  padding: 15px 0;
}
</style>

按钮样式 ​

size="small"

size="default"

size="large"

示例代码 ​

vue
<script setup>
import { ref, reactive } from 'vue'
import { ProCheckboxGroup } from '../../../../packages/components'
import 'element-plus/dist/index.css'

const state = reactive({
  checkboxValue1: [],
  checkboxValue2: [],
  checkboxValue3: [],
  checkboxData: [
    { label: '北京', value: 'beijing' },
    { label: '上海', value: 'shanghai' },
    { label: '广州', value: 'guangzhou' },
    { label: '杭州', value: 'hangzhou' }
  ]
})
</script>

<template>
  <h4>size="small"</h4>
  <ProCheckboxGroup
    :data="state.checkboxData"
    v-model="state.checkboxValue1"
    size="small"
    checkbox-type="button"
  />
  <h4>size="default"</h4>
  <ProCheckboxGroup
    :data="state.checkboxData"
    v-model="state.checkboxValue2"
    size="default"
    checkbox-type="button"
  />
  <h4>size="large"</h4>
  <ProCheckboxGroup
    :data="state.checkboxData"
    v-model="state.checkboxValue3"
    size="large"
    checkbox-type="button"
  />
</template>

<style lang="scss" scoped>
h4 {
  padding: 15px 0;
}
</style>

显示&禁用 ​

基础控制

display: true | false

disabled: true | false

动态控制

display: function (checkbox) { ... return true | false }

disabled: function (checkbox) { ... return true | false }

整体禁用

disabled: true | false

示例代码 ​

vue
<script setup>
import { ref, reactive } from 'vue'
import { ProCheckboxGroup } from '../../../../packages/components'
import 'element-plus/dist/index.css'

const state = reactive({
  // 基础控制
  checkboxValue1: [],
  checkboxData1: [
    { label: '北京', value: 'beijing', display: false },
    { label: '上海', value: 'shanghai', disabled: true },
    { label: '广州', value: 'guangzhou' },
    { label: '杭州', value: 'hangzhou' }
  ],
  // 动态控制
  checkboxValue2: [],
  checkboxData2: [
    { label: '北京', value: 'beijing', display: (checkbox) => false },
    { label: '上海', value: 'shanghai', disabled: (checkbox) => true },
    { label: '广州', value: 'guangzhou' },
    { label: '杭州', value: 'hangzhou' }
  ],
  // 整体禁用
  checkboxValue3: [],
  checkboxData3: [
    { label: '北京', value: 'beijing' },
    { label: '上海', value: 'shanghai' },
    { label: '广州', value: 'guangzhou' },
    { label: '杭州', value: 'hangzhou' }
  ]
})
</script>

<template>
  <h4>基础控制</h4>
  <p>display: true | false</p>
  <p>disabled: true | false</p>
  <ProCheckboxGroup :data="state.checkboxData1" v-model="state.checkboxValue1" size="small" />
  <h4>动态控制</h4>
  <p>display: function (checkbox) { ... return true | false }</p>
  <p>disabled: function (checkbox) { ... return true | false }</p>
  <ProCheckboxGroup :data="state.checkboxData2" v-model="state.checkboxValue2" size="default" />
  <h4>整体禁用</h4>
  <p>disabled: true | false</p>
  <ProCheckboxGroup
    :data="state.checkboxData3"
    v-model="state.checkboxValue3"
    size="default"
    disabled
  />
</template>

<style lang="scss" scoped>
h4 {
  padding: 25px 0 0;
}
</style>

事件 ​

ProCheckboxGroup API ​

属性说明类型默认值
model-value/v-model绑定值Array-
checkbox-type多选框类型String: button、defaultdefault
size多选框大小String: large、default、small-
disabled多选框组整体禁用Booleanfalse
min可被勾选的 checkbox 的最小数量Number-
max可被勾选的 checkbox 的最大数量Number-
label为屏幕阅读器准备的标签String-
text-color当按钮为活跃状态时的字体颜色String#ffffff
fill当按钮为活跃状态时的边框和背景颜色String#409EFF
tag复选框组元素标签Stringdiv
validate-event是否触发表单的校验Booleantrue
data多选框配置数据
[详见【Checkbox API】]		Array[Object][]

Checkbox API ​

属性说明类型默认值
value多选框的值String Number Boolean Object-
label多选框文本String Number Boolean Object-
true-value选中时的值String Number-
false-value没有选中时的值String Number-
true-label选中时的值String Number-
false-label没有选中时的值String Number-
border是否显示边框Booleanfalse
size多选框大小String: large、default、small-
name原生 name 属性String-
checked当前是否勾选Booleanfalse
indeterminate设置不确定状态，仅负责样式控制Booleanfalse
validate-event输入时是否触发表单的校验Booleantrue
tabindex输入框的 tabindexString Number-
idinput idStringfalse
controls与aria-control一致, 当indeterminate为true时生效Boolean-
display多选框显示控制Boolean: true | false
Function: (data) => Boolean		true
disabled多选框禁用控制Boolean: true | false
Function: (data) => Boolean		false

Events ​

Slots ​