Skip to content

c7-checkbox 复选框组件

基于 Element Plus 的 el-checkbox 组件进行封装,提供了更便捷的多选功能,支持静态数据、异步数据、全选功能等多种模式。

基础用法

最简单的复选框使用方式:

返回结果格式

支持数组和字符串两种返回格式:

全选功能

支持全选/全不选功能:

按钮样式

支持按钮样式的复选框:

事件监听

支持 change 事件监听:

异步数据获取

支持通过函数动态获取数据:

异步数据示例

展示异步数据获取的完整流程:

数据格式化

支持自定义数据格式化函数:

绑定值类型对比

展示不同绑定值类型的使用效果:

Attributes

属性名说明类型默认值
modelValue / v-model选中项绑定值,支持数组或逗号分隔字符串Array / String[]
fetchData异步获取数据的函数Functionnull
dataList静态数据列表,当 fetchData 为 null 时使用Array[]
fetchParams异步获取数据时的额外参数Object{}
resultKey异步结果中列表数据所在的路径String'data'
dataFormatter数据格式化回调,接收原始 list,返回格式化后的 listFunctionnull
indeterminate是否显示"全选"复选框Booleanfalse
separator是否将选中值转换为逗号分隔的字符串Booleantrue
labelKey数据项中标签字段的键名String'label'
valueKey数据项中值字段的键名String'value'
button是否使用按钮样式复选框Booleanfalse

Events

事件名说明回调参数
update:modelValue当绑定值发生变化时触发`(value: Array
change当选中项发生变化时触发(value: Array)

数据格式

静态数据格式

javascript
const dataList = [
  { label: '苹果', value: 'apple' },
  { label: '香蕉', value: 'banana' },
  { label: '橙子', value: 'orange' }
]

异步数据函数格式

javascript
const fetchData = () => {
  return new Promise((resolve) => {
    resolve({
      data: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' }
      ]
    })
  })
}

功能特性

  1. 多种数据源:支持静态数据和异步数据获取
  2. 全选功能:支持全选/全不选功能,自动处理中间状态
  3. 多种绑定值:支持数组和字符串两种绑定方式
  4. 按钮样式:支持按钮样式的复选框
  5. 数据格式化:支持自定义数据格式化函数
  6. 事件监听:支持 change 事件监听

使用说明

  1. 静态数据:通过 dataList 属性传入静态数据
  2. 异步数据:通过 fetchData 函数动态获取数据
  3. 全选功能:设置 indeterminate: true 启用全选功能
  4. 绑定值类型:通过 separator 控制返回值的格式
  5. 按钮样式:设置 button: true 使用按钮样式
  6. 数据格式化:通过 dataFormatter 自定义数据格式化逻辑