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"
: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"
: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://gw.alipayobjects.com/zos/rmsportal/zO
没有合适的资源?快使用搜索试试~ 我知道了~
MF00780-.NET通用权限管理平台源码.zip
共848个文件
cs:330个
vue:210个
js:119个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 70 浏览量
2023-08-13
14:51:34
上传
评论
收藏 8.88MB ZIP 举报
温馨提示
MF00780-.NET通用权限管理平台源码
资源推荐
资源详情
资源评论
收起资源包目录
MF00780-.NET通用权限管理平台源码.zip (848个子文件)
.browserslistrc 34B
nginx.conf 4KB
default.conf 1KB
default.conf 1KB
nginx.conf 636B
applicationhost.config 83KB
SysMenuSeedData.cs 130KB
FlcFlowinstanceService.cs 43KB
SysDictDataSeedData.cs 34KB
SysRoleMenuSeedData.cs 24KB
SqlSugarSetup.cs 21KB
SysUserService.cs 20KB
SysMenuService.cs 19KB
SqlSugarRepository.cs 18KB
DocumentService.cs 18KB
FlowRuntime.cs 16KB
SysOrgService.cs 15KB
CodeGenService.cs 14KB
SysRoleService.cs 13KB
FlcFlowschemeService.cs 13KB
SysConfigSeedData.cs 13KB
SysTenantService.cs 12KB
SysTimerService.cs 12KB
ValidatorUtil.cs 12KB
Extensions.cs 12KB
MachineUtil.cs 12KB
FlowLine.cs 11KB
ClickWordCaptcha.cs 11KB
AuthService.cs 11KB
SysNoticeService.cs 10KB
HttpNewUtil.cs 10KB
SysFileService.cs 10KB
ErrorCode.cs 9KB
LogJobWorker.cs 9KB
OSSClientUtil.cs 9KB
SysNoticeSeedData.cs 8KB
DataBaseManager.cs 8KB
SysDictTypeSeedData.cs 8KB
SysCacheService.cs 8KB
Extension.DateTime.cs 8KB
FlcFormManageService.cs 7KB
SysCodeGenConfigSeedData.cs 7KB
Program.cs 7KB
EnumUtil.cs 7KB
HttpStatusCode.cs 7KB
SysDictTypeService.cs 6KB
ImageUtil.cs 6KB
SysDictDataService.cs 6KB
FlcFlowinstance.cs 6KB
SysAppService.cs 6KB
TrashService.cs 6KB
SysConfigService.cs 6KB
SysEmpService.cs 6KB
EnumExtensions.cs 5KB
Startup.cs 5KB
DataFilterExtensions.cs 5KB
ConfigOptions.cs 5KB
CodeGenConfigService.cs 4KB
Base64Util.cs 4KB
SysPosService.cs 4KB
FlowNode.cs 4KB
DbMaintenanceExtension.cs 4KB
SysEmpExtOrgPosService.cs 4KB
GeneralCaptcha.cs 4KB
SysCodeGenConfig.cs 4KB
RestfulResultProvider.cs 4KB
SqlSugarHelper.cs 4KB
UserInput.cs 4KB
FlcDEntityBase.cs 4KB
SysMenu.cs 4KB
SysRoleMenuService.cs 4KB
CodeGenInput.cs 4KB
SysEnumDataService.cs 4KB
LoginOutput.cs 4KB
MemoryCache.cs 4KB
WechatOAuth.cs 3KB
SysEmpPosService.cs 3KB
DocumentInput.cs 3KB
FlcFlowinstanceInput.cs 3KB
SysUserRoleService.cs 3KB
SysUserSeedData.cs 3KB
SysTestSeedData.cs 3KB
SysLogOp.cs 3KB
ICache.cs 3KB
RequestActionFilter.cs 3KB
CodeGenConfig.cs 3KB
DEntityBase.cs 3KB
JsonUtil.cs 3KB
MenuInput.cs 3KB
SysRoleDataScopeService.cs 3KB
SysUser.cs 3KB
Test.cs 3KB
SysTimer.cs 3KB
FlcFlowscheme.cs 3KB
FlcForm.cs 3KB
TextWriterExtensions.cs 3KB
FlcFlowinstanceDto.cs 3KB
SysUserDataScopeService.cs 3KB
DocumentOutput.cs 3KB
SysOauthUser.cs 3KB
共 848 条
- 1
- 2
- 3
- 4
- 5
- 6
- 9
资源评论
jane9872
- 粉丝: 89
- 资源: 7719
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功