共计 864 个字符,预计需要花费 3 分钟才能阅读完成。
组件标签
<calendar :loading="loading" :classData="classData" :contentData="contentData" @calendar-date="changeDate"></calendar>
- 属性说明
属性名 | 说明 | 参数 |
loading | 加载动画 | Boolean |
classData | 作则 | Array(指定格式见下文) |
contentData | 表格数据 | Array(指定格式见下文) |
classData 数据格式
可以携带自定义的参数,但以下为组件必须要求所有属性
classData:[
{
name: '厦门',
id: '88',
children: [
{
name: '精选',
id: '74',
},
{
name: '搞定',
id: '77',
},
]
},
{
name: '泉州',
id: '89',
children: [
{
name: '精选',
id: '70',
},
{
name: '搞定',
id: '78',
},
]
},
]
contentData 数据格式
可以携带自定义的参数,但以下为组件必须要求所有属性
0/9 = count/targetCount
sunday 当前是否为星期日
注:children.length 必须为当前选择月的天数,不能多少(这里至少举个例子)
children 顺序必须要和左侧分类,以及天数对应。
组件的渲染方式为 一行一行渲染
例如:厦门下的 children 数组中对应的就是 厦门 – 精选 – 第 02 天
classData:[
{
name: '厦门',
id: '88',
children: [
{
count: 0,
targetCount: 9,
sunday: false
},
{
count: 2,
targetCount: 9,
sunday: false
},
]
},
{
name: '泉州',
id: '89',
children: [
{
count: 3,
targetCount: 9,
sunday: false
},
{
count: 1,
targetCount: 2,
sunday: false
},
]
},
]
- 事件
名称 | 说明 | 返回 |
calendar-date | 选择日期下拉完成后 | 当前当前选择日期 Date 类型 |
效果图:
正文完