1. docs
sss
  • docs
    • docs
      • EleProLayout 高级布局组件使用文档
      • Markdown - ByteMdEditor
      • 下拉菜单 - EleDropdown
      • 主题功能
      • 二维码 - EleQrcode
      • 全局配置 - EleConfigProvider
      • 其他功能
      • 分段器 - EleSegmented
      • 分页组件 - ElePagination
      • 加载中 - EleLoading
      • 包裹组件 - EleApp
      • 卡片组件 - EleCard
      • 可选卡片 - EleCheckCard
      • 图标选择 - EleIconSelect
      • 富文本 - TinymceEditor
      • 导航菜单 - EleMenus
      • 工具方法与表单数据操作文档
      • 抽屉组件 - EleDrawer
      • 文字提示 - EleTooltip
      • 文本组件 - EleText
      • 标签输入 - EleEditTag
      • 标签页 - EleTabs
      • 树下拉 - EleTreeSelect
      • 步骤条 - EleSteps
      • 气泡确认框 - ElePopconfirm
      • 消息提示 - EleMessage
      • 统计图表 - VueEcharts
      • 表格下拉 - EleTableSelect
      • 表格组件 - EleDataTable
      • 警告提示 - EleAlert
      • 页面容器 - ElePage
      • 高级弹窗 - EleModal
      • 高级表格 - EleProTable
  1. docs

可选卡片 - EleCheckCard

5.29.1.快速使用
可选卡片(v1.1.0新增)主要是对单选和多选的逻辑进行封装,卡片的显示内容及布局方式可完全的自定义,使用示例:

运行代码 新窗口打开
单选模式:

运行代码 新窗口打开
5.29.2.属性列表
items 支持的属性:
row 可以为 true 或 ElRow 的全部属性开启栅格布局,然后 item 可以用 col 属性设置每个 item 的栅格属性。
5.29.3.事件列表
5.29.4.插槽列表
item 当前 item 数据, checked 当前 item 是否选中状态, disabled 当前 item 是否禁用状态。
实现标签选择风格的示例:

.check-tag { display: flex; flex-wrap: wrap; align-items: center; box-sizing: border-box; padding-left: 12px; :deep(.ele-check-card) { font-size: 13px; height: 23px; line-height: 23px; padding: 0 8px; margin: 0 8px 8px 0; border-radius: 4px; &:not(.is-disabled):not(.is-checked):hover { background: var(--el-fill-color-light); } &.is-checked { color: #fff; background: var(--el-color-primary); } &.is-disabled { background: none; opacity: 1; &.is-checked { color: var(--el-disabled-text-color); background: var(--el-disabled-bg-color); } } } }

运行代码 新窗口打开
实现纯图片如支付方式选择的示例:


运行代码 新窗口打开

修改于 2025-12-20 03:37:01
上一页
卡片组件 - EleCard
下一页
图标选择 - EleIconSelect
Built with