# 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失效 |