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:/
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
基于 SSM(Spring + Spring MVC + MyBatis)框架和 MySQL 数据库的大学生就业信息管理系统源码+数据库(毕业设计).zip 是一个压缩文件,包含了一个完整的大学生就业信息管理系统的源代码和数据库文件。 该压缩文件内包含了以下内容: 源码文件:包括基于 SSM 框架实现的大学生就业信息管理系统的后端代码,可能包括数据模型设计、业务逻辑处理、控制器、视图等部分。 数据库文件:包含了系统所需的数据库结构和初始数据,以 SQL 或其他数据库导出文件的形式提供。 这个系统是一个毕业设计项目,旨在帮助学生管理和查询就业信息,提高就业管理的效率。通过提供源码和数据库文件,用户可以学习和理解 SSM 框架的使用方法,掌握 Web 开发中的后端技术和数据库设计,从而在实际项目中进行应用和研究。
资源推荐
资源详情
资源评论
收起资源包目录
基于SSM+MySQL大学生就业信息管理系统源码+数据库(毕业设计).zip (356个子文件)
.browserslistrc 34B
mvnw.cmd 8KB
nginx.conf 641B
caddy.conf 92B
config 302B
description 73B
.env.development 67B
Dockerfile 138B
1687075765708python简历.docx 116KB
1687075742911java简历.docx 116KB
1686928462646作业.docx 13KB
1686926792339作业.docx 13KB
.editorconfig 659B
.env 67B
exclude 240B
.gitattributes 381B
.gitignore 428B
.gitignore 273B
.gitignore 232B
HEAD 181B
HEAD 181B
HEAD 32B
HEAD 23B
index.html 2KB
pack-0c15c31651170bed3457cab090ea6ae67359e75b.idx 14KB
index 38KB
maven-wrapper.jar 61KB
BaseServiceImpl.java 5KB
RecruitServiceImpl.java 4KB
AccountController.java 4KB
ResumeController.java 3KB
ApplyServiceImpl.java 3KB
OfferServiceImpl.java 3KB
NoticeServiceImpl.java 3KB
ResumeServiceImpl.java 3KB
AnaylizeServiceImpl.java 3KB
JwtConfig.java 2KB
TokenInterceptor.java 2KB
ApplyController.java 2KB
RecruitController.java 1KB
NoticeController.java 1KB
CompanyServiceImpl.java 1KB
RoleController.java 1KB
AccountServiceImpl.java 1KB
AnaylizeController.java 1KB
UserInfoServiceImpl.java 1KB
ApiResult.java 1KB
JpaUtil.java 1KB
Recruit.java 1KB
OfferController.java 1KB
UserInfo.java 945B
StaticResourceConfig.java 938B
Account.java 910B
BaseEntity.java 901B
RoleServiceImpl.java 835B
Notice.java 831B
CompanyController.java 789B
UserInfoController.java 782B
Apply.java 772B
GlobalExcepHandler.java 748B
Company.java 732B
ApplyDao.java 689B
Resume.java 677B
OfferDao.java 649B
Offer.java 634B
WebConfig.java 593B
JpaConfig.java 515B
Role.java 480B
AccountDao.java 396B
BaseService.java 386B
NumberUtil.java 353B
EmploymentApplication.java 333B
BusinessExcep.java 332B
ResumeDao.java 319B
PageRequest.java 318B
CompanyService.java 314B
UserInfoService.java 311B
NoticeDao.java 303B
AccountService.java 297B
AnaylizeService.java 294B
RecruitDao.java 284B
ApplyService.java 274B
ResumeVo.java 274B
BaseDao.java 269B
PageResult.java 267B
ResumeService.java 263B
UserInfoDao.java 249B
CompanyDao.java 246B
RoleDao.java 237B
EmploymentApplicationTests.java 228B
AvatarVo.java 207B
RecruitService.java 196B
NoticeService.java 193B
OfferService.java 190B
CompanyVo.java 189B
RoleService.java 187B
UserVo.java 185B
LoginVo.java 139B
avatar2.jpg 78KB
resume.jpg 32KB
共 356 条
- 1
- 2
- 3
- 4
资源评论
m明月Java3
- 粉丝: 2w+
- 资源: 124
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 蓝zapro.apk
- chromedriver-linux64.zip
- 基于Python和PyTorch框架完成的一个手写数字识别实验源码(带MINIST手写数字数据集)+详细注释(高分项目)
- 基于Matlab在MNIST数据集上利用CNN完成手写体数字识别任务,并实现单层CNN反向传播算法+源代码+文档说明(高分项目)
- NVIDIA驱动、CUDA和Pytorch及其依赖
- html动态爱心代码一(附源码)
- c40539bc-071a-486c-9d52-9d0c18d62dac 4.html
- 基于物理的非视域成像(NLOS)算法,利用了nerf+python源码+文档说明
- yuluer知更鸟.7z(1).001
- python课程设计-基于tensorflow实现的图文生成程序,数据集flickr30k-images+源代码+文档说明+截图
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功