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禁用该项Booleanfalse
selected标记该项为选中状态Booleanfalse
to跳转的链接,支持 vue-router 对象String | Object-
replace路由跳转时,开启 replace 将不会向 history 添加新记录Booleanfalse
target相当于 a 链接的 target 属性String_self
append 3.4.0同 vue-router appendBooleanfalse

Cell slot

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