Table 重封装组件说明
====
封装说明
----
> 基础的使用方式与 API 与 [官方版(Table)](https://vuecomponent.github.io/ant-design-vue/components/table-cn/) 本一致,在其基础上,封装了加载数据的方法。
>
> 你无需在你是用表格的页面进行分页逻辑处理,仅需向 Table 组件传递绑定 `:data="Promise"` 对象即可
该 `table` 由 [@Saraka](https://github.com/saraka-tsukai) 完成封装
例子1
----
(基础使用)
```vue
<template>
<s-table
ref="table"
size="default"
:rowKey="(record) => record.data.id"
:columns="columns"
:data="loadData"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
>
</s-table>
</template>
<script>
import STable from '@/components'
export default {
components: {
STable
},
data() {
return {
columns: [
{
title: '规则编号',
dataIndex: 'no'
},
{
title: '描述',
dataIndex: 'description'
},
{
title: '服务调用次数',
dataIndex: 'callNo',
sorter: true,
needTotal: true,
customRender: (text) => text + ' 次'
},
{
title: '状态',
dataIndex: 'status',
needTotal: true
},
{
title: '更新时间',
dataIndex: 'updatedAt',
sorter: true
}
],
// 查询条件参数
queryParam: {},
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
return this.$http.get('/service', {
params: Object.assign(parameter, this.queryParam)
}).then(res => {
return res.result
})
},
selectedRowKeys: [],
selectedRows: []
}
},
methods: {
onSelectChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
}
}
}
</script>
```
例子2
----
(简单的表格,最后一列是各种操作)
```vue
<template>
<s-table
ref="table"
size="default"
:columns="columns"
:data="loadData"
>
<span slot="action" slot-scope="text, record">
<a>编辑</a>
<a-divider type="vertical"/>
<a-dropdown>
<a class="ant-dropdown-link">
更多 <a-icon type="down"/>
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">1st menu item</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">2nd menu item</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">3rd menu item</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</s-table>
</template>
<script>
import STable from '@/components/table/'
export default {
components: {
STable
},
data() {
return {
columns: [
{
title: '规则编号',
dataIndex: 'no'
},
{
title: '描述',
dataIndex: 'description'
},
{
title: '服务调用次数',
dataIndex: 'callNo',
},
{
title: '状态',
dataIndex: 'status',
},
{
title: '更新时间',
dataIndex: 'updatedAt',
},
{
table: '操作',
dataIndex: 'action',
scopedSlots: {customRender: 'action'},
}
],
// 查询条件参数
queryParam: {},
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
return this.$http.get('/service', {
params: Object.assign(parameter, this.queryParam)
}).then(res => {
return res.result
})
},
}
},
methods: {
edit(row) {
// axios 发送数据到后端 修改数据成功后
// 调用 refresh() 重新加载列表数据
// 这里 setTimeout 模拟发起请求的网络延迟..
setTimeout(() => {
this.$refs.table.refresh() // refresh() 不传参默认值 false 不刷新到分页第一页
}, 1500)
}
}
}
</script>
```
内置方法
----
通过 `this.$refs.table` 调用
`this.$refs.table.refresh(true)` 刷新列表 (用户新增/修改数据后,重载列表数据)
> 注意:要调用 `refresh(bool)` 需要给表格组件设定 `ref` 值
>
> `refresh()` 方法可以传一个 `bool` 值,当有传值 或值为 `true` 时,则刷新时会强制刷新到第一页(常用户页面 搜索 按钮进行搜索时,结果从第一页开始分页)
内置属性
----
> 除去 `a-table` 自带属性外,还而外提供了一些额外属性属性
| 属性 | 说明 | 类型 | 默认值 |
| -------------- | ----------------------------------------------- | ----------------- | ------ |
| alert | 设置是否显示表格信息栏 | [object, boolean] | null |
| showPagination | 显示分页选择器,可传 'auto' \| boolean | [string, boolean] | 'auto' |
| data | 加载数据方法 必须为 `Promise` 对象 **必须绑定** | Promise | - |
`alert` 属性对象:
```javascript
alert: {
show: Boolean,
clear: [Function, Boolean]
}
```
注意事项
----
> 你可能需要为了与后端提供的接口返回结果一致而去修改以下代码:
> (需要注意的是,这里的修改是全局性的,意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。)
>
> 文档中的结构有可能由于组件 bug 进行修正而改动。实际修改请以当时最新版本为准
修改 `@/components/table/index.js` 第 156 行起
```javascript
result.then(r => {
this.localPagination = this.showPagination && Object.assign({}, this.localPagination, {
current: r.pageNo, // 返回结果中的当前分页数
total: r.totalCount, // 返回结果中的总记录数
showSizeChanger: this.showSizeChanger,
pageSize: (pagination && pagination.pageSize) ||
this.localPagination.pageSize
}) || false
// 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
if (r.data.length === 0 && this.showPagination && this.localPagination.current > 1) {
this.localPagination.current--
this.loadData()
return
}
// 这里用于判断接口是否有返回 r.totalCount 且 this.showPagination = true 且 pageNo 和 pageSize 存在 且 totalCount 小于等于 pageNo * pageSize 的大小
// 当情况满足时,表示数据不满足分页大小,关闭 table 分页功能
try {
if ((['auto', true].includes(this.showPagination) && r.totalCount <= (r.pageNo * this.localPagination.pageSize))) {
this.localPagination.hideOnSinglePage = true
}
} catch (e) {
this.localPagination = false
}
console.log('loadData -> this.localPagination', this.localPagination)
this.localDataSource = r.data // 返回结果中的数组数据
this.localLoading = false
})
```
返回 JSON 例子:
```json
{
"message": "",
"result": {
"data": [{
id: 1,
cover: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
title: 'Alipay',
description: '那是一种内在的东西, 他们到达不了,也无法触及的',
status: 1,
updatedAt: '2018-07-26 00:00:00'
},
{
id: 2,
cover: 'https:/
没有合适的资源?快使用搜索试试~ 我知道了~
灵活,可靠和快速的分布式任务重试和分布式任务调度平台
共1246个文件
java:755个
js:167个
vue:101个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 85 浏览量
2024-01-30
20:18:06
上传
评论
收藏 4.42MB ZIP 举报
温馨提示
灵活,可靠和快速的分布式任务重试和分布式任务调度平台。可重放,可管控、为提高分布式业务系统一致性的分布式任务重试平台。支持秒级、可中断、可编排的高性能分布式任务调度平台。EasyRetry是一款致力提高分布式业务系统一致性的分布式重试平台。它提供了控制台任务观测、可配置的重试策略、重试后执行回调以及丰富地告警配置等功能。通过这些手段,可以对异常数据进行全面监测和回放,从而在确保系统高可用性的同时,大大提升数据的一致性。
资源推荐
资源详情
资源评论
收起资源包目录
灵活,可靠和快速的分布式任务重试和分布式任务调度平台 (1246个子文件)
.browserslistrc 34B
easyretry.conf 3KB
nginx.conf 641B
caddy.conf 92B
chunk-vendors.5e3eff05.css 466KB
chunk-acd4dcc0.0051104d.css 253KB
app.f24fef3a.css 43KB
chunk-54cc2708.f5c543fa.css 36KB
RihNDpOw.css 19KB
RihNDpOw.css 19KB
chunk-5d6686e0.f5567e76.css 4KB
chunk-8ab79138.047e5ad3.css 3KB
chunk-254eca9d.a4d978d8.css 2KB
user.6ccd4506.css 787B
chunk-073344ab.b4143ac5.css 389B
chunk-aa00ce98.37789adb.css 61B
chunk-6204f6d4.33cac402.css 61B
chunk-6cba1710.33cac402.css 61B
chunk-21492311.33cac402.css 61B
chunk-4fbc7c8c.4faf2875.css 30B
chunk-4e75193a.4faf2875.css 30B
chunk-12afb555.4faf2875.css 30B
chunk-395a76bd.4faf2875.css 30B
.env.development 67B
Dockerfile 439B
Dockerfile 138B
.editorconfig 659B
.env 74B
spring.factories 214B
spring.factories 153B
spring.factories 151B
spring.factories 150B
spring.factories 149B
spring.factories 145B
spring.factories 134B
spring.factories 132B
spring.factories 126B
spring.factories 124B
spring.factories 122B
.gitattributes 26B
.gitignore 490B
.gitignore 490B
.gitignore 490B
.gitignore 490B
.gitignore 490B
.gitignore 490B
.gitignore 490B
.gitignore 415B
.gitignore 415B
.gitignore 415B
.gitignore 415B
.gitignore 415B
.gitignore 415B
.gitignore 415B
.gitignore 415B
.gitignore 415B
.gitignore 415B
.gitignore 415B
.gitignore 415B
.gitignore 344B
.gitignore 337B
.gitignore 232B
index.html 7KB
index.html 3KB
index.html 385B
index.html 385B
CronExpression.java 60KB
RetryTaskServiceImpl.java 21KB
GroupConfigServiceImpl.java 17KB
WorkflowServiceImpl.java 16KB
WorkflowBatchHandler.java 15KB
DashBoardServiceImpl.java 14KB
LeapArray.java 14KB
SystemUserServiceImpl.java 14KB
SegmentIdGenerator.java 13KB
SlidingWindow.java 12KB
EasyRetryInterceptor.java 12KB
RetryEndPoint.java 12KB
JobServiceImpl.java 12KB
WorkflowBatchServiceImpl.java 12KB
JobExecutorActor.java 11KB
AbstractGenerator.java 11KB
RpcClientInvokeHandler.java 11KB
ActorGenerator.java 11KB
ServerNodeBalance.java 10KB
WorkflowHandler.java 10KB
RetryDeadLetterServiceImpl.java 10KB
FilterStrategies.java 10KB
CacheRegisterTable.java 9KB
AbstractConfigAccess.java 9KB
WorkflowExecutorActor.java 9KB
AbstractScanGroup.java 9KB
JsonUtil.java 9KB
Console.java 9KB
CallbackWorkflowExecutor.java 8KB
AbstractRetryStrategies.java 8KB
ScanJobTaskActor.java 8KB
DateTypeEnum.java 8KB
Remote.java 8KB
Local.java 8KB
共 1246 条
- 1
- 2
- 3
- 4
- 5
- 6
- 13
资源评论
Java程序员-张凯
- 粉丝: 1w+
- 资源: 6713
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功