- Cell 单元格
- 概述
- 代码示例
- API
- CellGroup events
- Cell props
- Cell slot
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 | 禁用该项 | 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 | 有链接时,可自定义右侧箭头 |
