38 lines
1.9 KiB
Markdown
38 lines
1.9 KiB
Markdown
|
# DataPanel
|
|||
|
|
|
|||
|
|
### 说明
|
|||
|
|
- 已全局声明
|
|||
|
|
- 在EmptyData上进行了二次封装，通过empty和loading字段自适应展示数据
|
|||
|
|
- loading使用d-skeleton方案，可以通过$slots.loading自定义。或者不传入loading，自己加v-loading="loading"
|
|||
|
|
- empty使用EmptyData方案，可以通过$slots.empty自定义
|
|||
|
|
|
|||
|
|
``` ts
|
|||
|
|
<DataPanel :empty="!dataList?length" :loading="loading">
|
|||
|
|
<d-table :data="dataList" />
|
|||
|
|
</DataPanel>
|
|||
|
|
|
|||
|
|
const dataList = ref([]);
|
|||
|
|
const loading = ref(false);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Props
|
|||
|
|
|
|||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|||
|
|
|-----------|------------------------|----------------------------|----------|-----------|
|
|||
|
|
| loading? | 是否加载中。默认启动v-loading效果，如果传入$slots.loading则v-loading失效 | boolean | - | false |
|
|||
|
|
| empty? | 是否数据为空，为空默认展示d-result | boolean | - | false |
|
|||
|
|
| emptyText? | 数据为空的标题 | string | - | '暂无数据' |
|
|||
|
|
| emptyDetail? | 数据为空标题下方的描述 | string | - | '暂无数据' |
|
|||
|
|
| skeleton? | loading状态下显示骨架屏，比animation优先级更高 | boolean | - | false |
|
|||
|
|
| animation? | loading状态下显示定制的loading | boolean | - | false |
|
|||
|
|
| card? | 是否使用g-card组件样式 | boolean | - | true |
|
|||
|
|
|
|||
|
|
### Slots
|
|||
|
|
|
|||
|
|
| 名称 | 说明 |
|
|||
|
|
|---------------------|---------------------------------------------|
|
|||
|
|
| default | 数据自定义区域 |
|
|||
|
|
| empty? | 数据为空的定义 |
|
|||
|
|
| loading? | loading效果，如骨架屏。默认使用v-loading，传入loading slot则v-loading失效 |
|
|||
|
|
|