• Cell 单元格
    • 概述
    • 代码示例
    • API
      • CellGroup events
      • Cell props
      • Cell slot

    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有链接时,可自定义右侧箭头