首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Cell 单元格

概述

用于固定的菜单列表。

代码示例

代码语言:javascript
复制
<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

有链接时,可自定义右侧箭头

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com