Cell 单元格

Cell 单元格

概述

用于固定的菜单列表。

代码示例

<template> <div style="padding: 10px;background: #f8f8f9"> <Card title="Options" icon="ios-options" :padding="0" shadow style="width: 300px;"> <CellGroup> <Cell title="Only show titles" /> <Cell title="Display label content" label="label content" /> <Cell title="Display right content" extra="details" /> <Cell title="Link" extra="details" to="/components/button" /> <Cell title="Open link in new window" to="/components/button" target="_blank" /> <Cell title="Disabled" disabled /> <Cell title="Selected" selected /> <Cell title="With Badge" to="/components/badge"> <Badge :count="10" slot="extra" /> </Cell> <Cell title="With Switch"> <Switch v-model="switchValue" slot="extra" /> </Cell> </CellGroup> </Card> </div> </template> <script> export default { data () { return { switchValue: true } }, } </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

Cell slot

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