fix: 添加 table文档（30%）
This commit is contained in:
zhangyu
@@ -40,6 +40,14 @@ export const sidebar = {
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'table',
|
||||
link: '/table',
|
||||
items: [
|
||||
{ text: 'deleteButton', link: '/deleteButton',},
|
||||
{ text: 'nzDataList', link: '/nzDataList',},
|
||||
]
|
||||
}
|
||||
],
|
||||
}
|
||||
],
|
||||
|
||||
@@ -61,5 +61,6 @@ const props = withDefaults(defineProps<{
|
||||
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
9
nezha-docs/src/table/demo.vue
Normal file
9
nezha-docs/src/table/demo.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
58
nezha-docs/src/table/index.en-US.md
Normal file
58
nezha-docs/src/table/index.en-US.md
Normal file
@@ -0,0 +1,58 @@
|
||||
---
|
||||
map:
|
||||
path: /table
|
||||
---
|
||||
|
||||
# 关联组件
|
||||
以asset为例子 其他表格 将asset换为对应名称
|
||||
|
||||
1. deleteButton 删除组件
|
||||
2. nzDataList table组件公共部分
|
||||
3. assetBox 对应的新增 编辑染成
|
||||
4. detailViewTopSearch 详细视图搜索框
|
||||
5. assetDetail 详细视图
|
||||
6. assetTable 对应table组件
|
||||
7. clickSearch 详细搜索框
|
||||
8. topToolMoreOptions 右侧工具菜单
|
||||
9. alertSilenceBox 告警静默弹窗
|
||||
10. nzDetailView 详细视图 公共部分
|
||||
|
||||
|
||||
# 示例
|
||||
```vue
|
||||
<div>
|
||||
<nz-detail-view>
|
||||
<template v-slot:top-tool-left>
|
||||
<detailViewTopSearch />
|
||||
</template>
|
||||
<template v-slot:top-tool-right>
|
||||
<top-tool-more-options></top-tool-more-options>
|
||||
</template>
|
||||
<template v-slot:nz-detail-view-list>
|
||||
<asset-detail></asset-detail>
|
||||
</template>
|
||||
<!-- 分页组件 -->
|
||||
<template v-slot:pagination>
|
||||
<el-pagination></el-pagination>
|
||||
</template>
|
||||
</nz-detail-view>
|
||||
<nz-data-list>
|
||||
<template v-slot:top-tool-right>
|
||||
<top-tool-more-options></top-tool-more-options>
|
||||
</template>
|
||||
<template v-slot:search >
|
||||
<click-search />
|
||||
</template>
|
||||
<template v-slot:default="slotProps">
|
||||
<asset-table></asset-table>
|
||||
</template>
|
||||
<!-- 分页组件 -->
|
||||
<template v-slot:pagination>
|
||||
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
|
||||
</template>
|
||||
</nz-data-list>
|
||||
<transition name="right-box">
|
||||
<asset-box />
|
||||
</transition>
|
||||
</div>
|
||||
```
|
||||
39
nezha-docs/src/table/index.vue
Normal file
39
nezha-docs/src/table/index.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<script lang="ts" setup>
|
||||
const props = withDefaults(defineProps<{
|
||||
/**
|
||||
* chart相关信息 如id 位置等
|
||||
*/
|
||||
chartInfo?: string,
|
||||
/**
|
||||
* 是否报错
|
||||
*/
|
||||
isError?: boolean,
|
||||
/**
|
||||
* chart相关数据 若报错 取 item.error
|
||||
*/
|
||||
chartData?: { },
|
||||
/**
|
||||
* 是否显示全部数据
|
||||
*/
|
||||
showAllData?: boolean,
|
||||
/**
|
||||
* 全部数据的长度
|
||||
*/
|
||||
allDataLength?: number,
|
||||
/**
|
||||
* 是否为快照
|
||||
*/
|
||||
isExportHtml?: boolean,
|
||||
/**
|
||||
* 是否为预览
|
||||
*/
|
||||
isPreview?: boolean,
|
||||
}>(), {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
</div>
|
||||
</template>
|
||||
59
nezha-docs/src/table/index.zh-CN.md
Normal file
59
nezha-docs/src/table/index.zh-CN.md
Normal file
@@ -0,0 +1,59 @@
|
||||
---
|
||||
map:
|
||||
path: /table
|
||||
---
|
||||
|
||||
# 关联组件
|
||||
以asset为例子 其他表格 将asset换为对应名称
|
||||
|
||||
1. deleteButton 删除组件
|
||||
2. nzDataList table组件公共部分
|
||||
3. assetBox 对应的新增 编辑染成
|
||||
4. detailViewTopSearch 详细视图搜索框
|
||||
5. assetDetail 详细视图
|
||||
6. assetTable 对应table组件
|
||||
7. clickSearch 详细搜索框
|
||||
8. topToolMoreOptions 右侧工具菜单
|
||||
9. alertSilenceBox 告警静默弹窗
|
||||
10. nzDetailView 详细视图 公共部分
|
||||
|
||||
|
||||
# 示例
|
||||
```vue
|
||||
<div>
|
||||
<nz-detail-view>
|
||||
<template v-slot:top-tool-left>
|
||||
<detailViewTopSearch />
|
||||
</template>
|
||||
<template v-slot:top-tool-right>
|
||||
<top-tool-more-options></top-tool-more-options>
|
||||
</template>
|
||||
<template v-slot:nz-detail-view-list>
|
||||
<asset-detail></asset-detail>
|
||||
</template>
|
||||
<!-- 分页组件 -->
|
||||
<template v-slot:pagination>
|
||||
<el-pagination></el-pagination>
|
||||
</template>
|
||||
</nz-detail-view>
|
||||
<nz-data-list>
|
||||
<template v-slot:top-tool-right>
|
||||
<top-tool-more-options></top-tool-more-options>
|
||||
</template>
|
||||
<template v-slot:search >
|
||||
<click-search />
|
||||
<click-search />
|
||||
</template>
|
||||
<template v-slot:default="slotProps">
|
||||
<asset-table></asset-table>
|
||||
</template>
|
||||
<!-- 分页组件 -->
|
||||
<template v-slot:pagination>
|
||||
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
|
||||
</template>
|
||||
</nz-data-list>
|
||||
<transition name="right-box">
|
||||
<asset-box />
|
||||
</transition>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
map:
|
||||
path: /deleteButton
|
||||
---
|
||||
|
||||
<API src="./index.vue" lang="en"></API>
|
||||
|
||||
39
nezha-docs/src/table/tableChild/deleteButton/index.vue
Normal file
39
nezha-docs/src/table/tableChild/deleteButton/index.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<script lang="ts" setup>
|
||||
const props = withDefaults(defineProps<{
|
||||
/**
|
||||
* 是否显示强制删除
|
||||
*/
|
||||
forceDeleteShow?: boolean,
|
||||
/**
|
||||
* 需要删除的数组
|
||||
*/
|
||||
deleteObjs?: Array,
|
||||
/**
|
||||
* 删除接口
|
||||
*/
|
||||
api?: string,
|
||||
/**
|
||||
* 唯一id
|
||||
*/
|
||||
id?: string,
|
||||
/**
|
||||
* 删除按钮的样式 是按钮 还是文字
|
||||
*/
|
||||
type?: string,
|
||||
/**
|
||||
* 删除的标题
|
||||
*/
|
||||
deleteTitle?: string,
|
||||
/**
|
||||
* 是否需要强制删除
|
||||
*/
|
||||
single?: boolean,
|
||||
}>(), {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
map:
|
||||
path: /deleteButton
|
||||
---
|
||||
|
||||
|
||||
|
||||
<API src="./index.vue" lang="zh"></API>
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
map:
|
||||
path: /nzDataList
|
||||
---
|
||||
|
||||
<API src="./index.vue" lang="en"></API>
|
||||
|
||||
41
nezha-docs/src/table/tableChild/nzDataList/index.vue
Normal file
41
nezha-docs/src/table/tableChild/nzDataList/index.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script lang="ts" setup>
|
||||
const props = withDefaults(defineProps<{
|
||||
/**
|
||||
* 是否显示强制删除
|
||||
*/
|
||||
forceDeleteShow?: boolean,
|
||||
/**
|
||||
* 需要删除的数组
|
||||
*/
|
||||
deleteObjs?: Array,
|
||||
/**
|
||||
* 删除接口
|
||||
*/
|
||||
api?: string,
|
||||
/**
|
||||
* 唯一id
|
||||
*/
|
||||
id?: string,
|
||||
/**
|
||||
* 删除按钮的样式 是按钮 还是文字
|
||||
*/
|
||||
type?: string,
|
||||
/**
|
||||
* 删除的标题
|
||||
*/
|
||||
deleteTitle?: string,
|
||||
/**
|
||||
* 是否需要强制删除
|
||||
*/
|
||||
single?: boolean,
|
||||
}>(), {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- 这里是默认插槽，可以插入自定义内容 -->
|
||||
<slot name="top-tool-left">{{ 213123 }}</slot>
|
||||
</div>
|
||||
</template>
|
||||
84
nezha-docs/src/table/tableChild/nzDataList/index.zh-CN.md
Normal file
84
nezha-docs/src/table/tableChild/nzDataList/index.zh-CN.md
Normal file
@@ -0,0 +1,84 @@
|
||||
---
|
||||
map:
|
||||
path: /nzDataList
|
||||
---
|
||||
# 关联组件
|
||||
1. SearchBox
|
||||
2. bottomBox
|
||||
3. panelChart
|
||||
4. deleteButton
|
||||
5. diagnosisTab
|
||||
6. configSync
|
||||
|
||||
|
||||
|
||||
# 示例代码
|
||||
```vue
|
||||
<div :class="from" class="list-page">
|
||||
<!-- 主页面 -->
|
||||
<div class="main-list">
|
||||
<!-- 顶部工具栏 -->
|
||||
<div class="main-container">
|
||||
<div class="top-tools">
|
||||
<div class="top-tool-left" >
|
||||
<search-box></search-box>
|
||||
<slot name="top-tool-left"></slot>
|
||||
</div>
|
||||
<div class="top-tool-right">
|
||||
<div>
|
||||
<search-input ></search-input>
|
||||
</div>
|
||||
<template>
|
||||
<slot name="top-tool-right"></slot>
|
||||
</template>
|
||||
<button v-if="showLayout.indexOf('elementSet') > -1" class="top-tool-btn table-column-setting"
|
||||
type="button" @click="tools.showCustomTableTitle = true" :title="$t('overall.selectColumns')">
|
||||
<i class="nz-icon-gear nz-icon"></i>
|
||||
</button>
|
||||
<el-dropdown>
|
||||
<button class="top-tool-btn table-column-setting"
|
||||
type="button" :title="$t('overall.switchView')">
|
||||
<i class="nz-icon nz-icon-list-view" />
|
||||
</button>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-dropdown-top right-box-select-top">
|
||||
<el-dropdown-item :command="'list'" :class="detailType === 'list' ? 'active' : ''">{{$t('asset.detail.list')}}</el-dropdown-item>
|
||||
<el-dropdown-item :command="'view'" :class="detailType === 'view' ? 'active' : ''">{{$t('asset.detail.detail')}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<!-- 顶部分页组件，当打开底部上滑框时出现 -->
|
||||
<!-- <div v-if="showLayout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>-->
|
||||
</div>
|
||||
<div >
|
||||
<slot name="search"></slot>
|
||||
</div>
|
||||
<div>
|
||||
<slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot>
|
||||
</div>
|
||||
<div>
|
||||
<slot name="pagination"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 自定义table列 -->
|
||||
<transition name="el-zoom-in-top">
|
||||
<element-set></element-set>
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<bottom-box ></bottom-box>
|
||||
</transition>
|
||||
|
||||
<delete-button></delete-button>
|
||||
<diagnosis-tab></diagnosis-tab>
|
||||
|
||||
<config-sync></config-sync>
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
<API src="./index.vue" lang="zh"></API>
|
||||
Reference in New Issue
Block a user