Cell 单元格

概述

用于固定的菜单列表。

代码示例

Cell 单元格 - 图1

基础用法

包含各类用法的综合示例。

  1. <template>
  2. <div style="padding: 10px;background: #f8f8f9">
  3. <Card title="Options" icon="ios-options" :padding="0" shadow style="width: 300px;">
  4. <CellGroup>
  5. <Cell title="Only show titles" />
  6. <Cell title="Display label content" label="label content" />
  7. <Cell title="Display right content" extra="details" />
  8. <Cell title="Link" extra="details" to="/components/button" />
  9. <Cell title="Open link in new window" to="/components/button" target="_blank" />
  10. <Cell title="Disabled" disabled />
  11. <Cell title="Selected" selected />
  12. <Cell title="With Badge" to="/components/badge">
  13. <Badge :count="10" slot="extra" />
  14. </Cell>
  15. <Cell title="With Switch">
  16. <Switch v-model="switchValue" slot="extra" />
  17. </Cell>
  18. </CellGroup>
  19. </Card>
  20. </div>
  21. </template>
  22. <script>
  23. export default {
  24. data () {
  25. return {
  26. switchValue: true
  27. }
  28. },
  29. }
  30. </script>

API

CellGroup events

事件名 说明 返回值
on-click 点击单元格时触发 name

Cell props

属性 说明 类型 默认值
name 用来标识这一项 String | Number -
title 左侧标题 String -
label 标题下方的描述信息 String -
extra 右侧额外内容 String -
disabled 禁用该项 Boolean false
selected 标记该项为选中状态 Boolean false
to 跳转的链接,支持 vue-router 对象 String | Object -
replace 路由跳转时,开启 replace 将不会向 history 添加新记录 Boolean false
target 相当于 a 链接的 target 属性 String _self
append 3.4.0 同 vue-router append Boolean false

Cell slot

名称 说明
默认 相当于 title
icon 标题前的 Icon
label 相当于 label
extra 相当于 extra
arrow 有链接时,可自定义右侧箭头