iView UI参考手册
组件布局
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 |
Cell slot
名称 |
说明 |
---|---|
默认 |
相当于 title |
icon |
标题前的 Icon |
label |
相当于 label |
extra |
相当于 extra |
arrow |
有链接时,可自定义右侧箭头 |