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/table/'
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 组件都需要遵守这个返回结果定义的字段。)
修改 `@/components/table/index.js` 第 132 行起
```javascript
result.then(r => {
this.localPagination = Object.assign({}, this.localPagination, {
current: r.pageNo, // 返回结果中的当前分页数
total: r.totalCount, // 返回结果中的总记录数
showSizeChanger: this.showSizeChanger,
pageSize: (pagination && pagination.pageSize) ||
this.localPagination.pageSize
})
// 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
if (r.data.length == 0 && this.localPagination.current != 1) {
this.localPagination.current--
this.loadData()
return
}
// 这里用于判断接口是否有返回 r.totalCount 或 this.showPagination = false
// 当情况满足时,表示数据不满足分页大小,关闭 table 分页功能
!r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
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/zOsKZmFRdUtvpqCImOVY.png',
title: 'Angular',
description: '希望是一个好东西,也许是最好的,好东西是不会消亡的',
status: 1,
updatedAt: '2018-07-26 00:00:00'
},
{
id: 3,
cover: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
tit
没有合适的资源?快使用搜索试试~ 我知道了~
基于SpringBoot+MybatisPlus+Druid+Jwt+Vue的智慧园区管理项目源码+数据.rar
共596个文件
java:280个
vue:105个
js:91个
需积分: 0 6 下载量 12 浏览量
2023-10-23
14:47:32
上传
评论
收藏 2.03MB RAR 举报
温馨提示
核心功能: 1. 驾驶舱 ⼯作台:多维数据图形报表的展示,配合资产管理模块最⼤化的了解(本⽉)账单、物业管 理费、租⾦、⽔电费等,详细收款信息并形成前TOP10排⾏榜,柱形图等。 2. 租户管理 租户管理:搭建多租户的管理模块,配合租户账号信息可开展分园区的配置 3. 园区管理 园区列表:该功能主要完成园区基本信息配置,包括园区的总⾯积、园区的总房间、经纬度 等基础的配置管理。 楼宇管理:快速的登记当前园区的⼚房,场地,办公楼,公寓楼等的固定资产的统计,管理 园区内的所有的楼宇、楼层的信息配置。 房间管理:配合楼宇管理 核心技术: 核心框架:Spring Boot 2.4.0 安全框架:JwtPermission 3.1.1 前端:Ant Design Vue 1.6.2 持久层框架:MyBatis-Plus 3.4.1 关系型数据库: Mysql 8.0.22 数据库连接池:Druid 1.2.3 缓存数据库: Redis 4.0.9 项目管理工具: Maven 3.3+ 工具类:Hutool 5.5.1
资源推荐
资源详情
资源评论
收起资源包目录
基于SpringBoot+MybatisPlus+Druid+Jwt+Vue的智慧园区管理项目源码+数据.rar (596个子文件)
.browserslistrc 37B
.env.development 156B
.editorconfig 698B
.env 160B
.gitattributes 26B
.gitignore 235B
index.html 3KB
Convert.java 25KB
ExcelUtil.java 23KB
JSONObject.java 20KB
HTMLFilter.java 19KB
ReflectUtils.java 13KB
UserServiceImpl.java 12KB
VelocityUtils.java 11KB
UserAgentUtils.java 10KB
GenTableServiceImpl.java 10KB
RoleServiceImpl.java 10KB
StringUtils.java 10KB
MenuServiceImpl.java 10KB
DeptServiceImpl.java 8KB
GuavaCacheUtil.java 8KB
HttpUtils.java 8KB
UserController.java 7KB
GenTableColumn.java 7KB
SmsServiceImpl.java 7KB
FileUploadUtils.java 7KB
JobServiceImpl.java 7KB
GenUtils.java 7KB
DateUtils.java 7KB
DataScopeAspect.java 6KB
AuthFilter.java 6KB
OperLogAspect.java 6KB
RegisterController.java 6KB
GenTable.java 6KB
IBaseServiceImpl.java 6KB
IpUtils.java 5KB
FileCloudServiceImpl.java 5KB
JobInvokeUtil.java 5KB
JsonUtils.java 5KB
GenController.java 5KB
WxMaUserController.java 5KB
FileController.java 5KB
ProfileController.java 5KB
RedisAspect.java 5KB
OssController.java 5KB
UserConstants.java 4KB
SysLoginServiceImpl.java 4KB
IUserService.java 4KB
BaseController.java 4KB
JobController.java 4KB
JSON.java 4KB
FileUtils.java 4KB
EscapeUtil.java 4KB
BeanUtils.java 4KB
PasswordAPIController.java 4KB
DictTypeServiceImpl.java 4KB
WxLoginAPIController.java 4KB
User.java 4KB
AccessTokenServiceImpl.java 4KB
ScheduleUtils.java 4KB
ConfigServiceImpl.java 4KB
OnlineController.java 4KB
MybatisEnumTypeHandler.java 3KB
CloudStorageConfig.java 3KB
RedisConfig.java 3KB
SnServiceImpl.java 3KB
Arith.java 3KB
ServletUtils.java 3KB
StrFormatter.java 3KB
UserMapper.java 3KB
IRoleService.java 3KB
AbstractQuartzJob.java 3KB
MenuController.java 3KB
DruidProperties.java 3KB
GenConstants.java 3KB
PolicyBannerController.java 3KB
DistrictsController.java 3KB
DictDataController.java 3KB
RedisUtils.java 3KB
DjBannerController.java 3KB
DistrictsServiceImpl.java 3KB
SpringUtils.java 3KB
RoleController.java 3KB
TokenController.java 3KB
DictDataServiceImpl.java 3KB
ExpenseSettingsController.java 3KB
QcloudCloudStorageService.java 3KB
PolicyController.java 3KB
GlobalExceptionHandler.java 3KB
IMenuService.java 3KB
DeptMapper.java 3KB
YamlUtil.java 3KB
DjController.java 3KB
JobLogController.java 3KB
SignatureUtils.java 2KB
CharsetKit.java 2KB
OperLog.java 2KB
ExpenseSettingsServiceImpl.java 2KB
MenuMapper.java 2KB
Constants.java 2KB
共 596 条
- 1
- 2
- 3
- 4
- 5
- 6
资源评论
shangjg3
- 粉丝: 1049
- 资源: 101
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Qt开发知识、经验总结 包括Qss,数据库,Excel,Model/View等
- IV数据.xlsx
- 一些深度学习中的小例子,适合新手学习使用
- foldcraftlauncher_262944.apk
- 珍藏多年的基于matlab实现潮流计算程序源代码集合,包含多个潮流计算程序.rar
- 使用FPGA实现串-并型乘法器
- 基于matlab实现针对基于双曲线定位的DV-Hop算法中误差误差出一种基于加权双曲线定位的DV-Hop改进算法.rar
- 基于matlab实现由遗传算法开发的整数规划,车辆调度问题.rar
- 电视家7.0(对电视配置要求高).apk
- 免费计算机毕业设计-基于JavaEE的医院病历管理系统设计与实现(包含论文+源码)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功