ant-design-vue/components/empty/demo/config-provider.md

86 lines
1.6 KiB
Markdown
Raw Normal View History

<cn>
#### 全局化配置
自定义全局组件的 Empty 样式。
</cn>
<us>
#### ConfigProvider
Use ConfigProvider set global Empty style.
</us>
```html
<template>
<div>
<a-switch
unCheckedChildren="default"
checkedChildren="customize"
:checked="customize"
@change="(val) => customize = val"
/>
<a-divider />
<a-config-provider>
2019-03-15 10:04:14 +08:00
<template v-if="customize" v-slot:renderEmpty>
2019-05-18 15:44:54 +08:00
<div style="text-align: center">
<a-icon type="smile" style="font-size: 20px" />
<p>Data Not Found</p>
</div>
</template>
<div class="config-provider">
<h3>Select</h3>
2019-05-18 15:44:54 +08:00
<a-select :style="style" :options="[]" />
<h3>TreeSelect</h3>
<a-tree-select :style="style" :treeData="[]" />
<h3>Cascader</h3>
<a-cascader :style="style" :options="[]" :showSearch="true" />
<h3>Transfer</h3>
2019-05-18 15:44:54 +08:00
<a-transfer :dataSource="[]" />
<h3>Table</h3>
<a-table
2019-05-18 15:44:54 +08:00
style="margin-top: 8px"
:columns="columns"
2019-05-18 15:44:54 +08:00
:dataSource="[]"
/>
<h3>List</h3>
2019-05-18 15:44:54 +08:00
<a-list :dataSource="[]" />
</div>
</a-config-provider>
</div>
</template>
<script>
export default {
data() {
return {
2019-03-15 10:04:14 +08:00
customize: false,
style: {width: '200px'},
columns: [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
]
}
2019-05-18 15:44:54 +08:00
}
}
</script>
<style>
.code-box-demo .config-provider h3 {
font-size: inherit;
margin: 16px 0 8px 0;
}
</style>
```