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',
没有合适的资源?快使用搜索试试~ 我知道了~
MF00962-springboot+vue在线考试源码.zip
共275个文件
java:84个
js:58个
vue:58个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 19 浏览量
2023-08-14
23:24:12
上传
评论
收藏 2.95MB ZIP 举报
温馨提示
Springboot+vue在线考试系统源码 前后端分离 注意:不带技术支持,有帮助文件,虚拟商品,发货不退,看好再拍。 开发语言 : JAVA 数据库 : MySQL 开发工具 : Eclipse 源码类型 : WebForm 这是一款功能简单实用的在线考试系统,后台采用springboot开发,前台采用vue.js。 系统支持单选题、多选题、判断题; 学生角色可以查看参加考试,教师和管理员角色可以对题目和考试信息增删查改; 系统前后端分离,前端组件化。后端采用SpringBoot+JPA++Swagger2+JWT校验; 前端采用Vue+AntDesign,组件化拆分,方便维护和二次开发。
资源推荐
资源详情
资源评论
收起资源包目录
MF00962-springboot+vue在线考试源码.zip (275个子文件)
loading.css 2KB
loading.css 307B
Dockerfile 159B
.editorconfig 698B
.env 44B
.gitattributes 26B
.gitignore 235B
html_code_segment.html 2KB
index.html 2KB
loading.html 186B
ExamServiceImpl.java 27KB
ExamController.java 10KB
UserServiceImpl.java 7KB
FileUtils.java 5KB
FileTransUtil.java 5KB
UserController.java 4KB
LoginInterceptor.java 4KB
UploadDownloadController.java 3KB
ExamService.java 3KB
ExamVo.java 2KB
Swagger2Config.java 2KB
QuestionVo.java 2KB
JwtUtils.java 2KB
Exam.java 2KB
JsonData.java 2KB
Question.java 1KB
QuestionCreateVo.java 1KB
ExamRecord.java 1KB
User.java 1KB
ExamCreateVo.java 1KB
QuestionCreateSimplifyVo.java 1KB
UserService.java 1KB
CORSConf.java 1KB
RecordDetailVo.java 1KB
UserInfoVo.java 1024B
UserRepository.java 951B
IntercepterConfig.java 915B
QuestionPageVo.java 905B
UserVo.java 891B
QuestionDetailVo.java 882B
ExamPageVo.java 873B
ResultEnum.java 833B
ResultVO.java 806B
QuestionCategory.java 790B
QuestionSelectionVo.java 786B
ResultVOUtil.java 785B
ExamCardVo.java 778B
ExamRecordRepository.java 769B
QuestionType.java 769B
QuestionLevel.java 743B
ServletConfig.java 729B
ExamQuestionTypeVo.java 728B
ExamQuestionSelectVo.java 720B
Role.java 693B
UploadModel2.java 686B
ExamRecordVo.java 678B
UploadModel.java 660B
QuestionOptionVo.java 658B
ExamDetailVo.java 656B
LoginQo.java 648B
ExamException.java 641B
QuestionRepository.java 638B
ExamRepository.java 637B
RoleVo.java 630B
QuestionOptionCreateVo.java 622B
RoleEnum.java 618B
PageVo.java 599B
QuestionEnum.java 591B
Action.java 580B
ExamRecordLevel.java 579B
Page.java 574B
ActionVo.java 557B
QuestionOption.java 547B
RegisterDTO.java 476B
LoginTypeEnum.java 444B
DownloadQo.java 442B
QuestionCategoryRepository.java 430B
ActionRepository.java 428B
ExamRecordLevelRepository.java 427B
QuestionOptionRepository.java 423B
RoleRepository.java 422B
PageRepository.java 422B
QuestionLevelRepository.java 421B
QuestionTypeRepository.java 418B
ExamApplication.java 322B
package-info.java 269B
package-info.java 158B
package-info.java 131B
package-info.java 128B
package-info.java 127B
package-info.java 127B
package-info.java 126B
package-info.java 124B
package-info.java 124B
cover3.jpg 84KB
avatar2.jpg 78KB
cover2.jpg 77KB
cover1.jpg 54KB
cover5.jpg 35KB
cover4.jpg 33KB
共 275 条
- 1
- 2
- 3
资源评论
jane9872
- 粉丝: 94
- 资源: 7751
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功