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',
title: 'Ant Design',
description: '城镇中有那么多的酒馆,她却偏偏走进了我的酒馆',
status: 1,
updatedAt: '2018-07-26 00:00:00'
},
{
id: 4,
cover: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.
没有合适的资源?快使用搜索试试~ 我知道了~
Java项目:在线考试系统(java+springboot+vue+jsp+mysql+maven)
共486个文件
xml:108个
java:83个
class:75个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 2 下载量 167 浏览量
2021-12-13
10:32:57
上传
评论 9
收藏 3.31MB RAR 举报
温馨提示
一、项目简述 本系统主要实现的功能有: 学生以及老师的注册登录,在线考试,错题查询,学生管理,问题管理,错题管理,错题查询,分数查询,试卷管 理,人工组卷。自动组卷,教师,班级,统计等等管理功能。 二、项目运行 环境配置: Jdk1.8 + Tomcat8.5 + mysql + Eclispe (IntelliJ IDEA,Eclispe,MyEclispe,Sts 都支持) 项目技术: VUE+Springboot+ SpringMVC + MyBatis + ThymeLeaf + JavaScript + JQuery + Ajax + maven等等
资源推荐
资源详情
资源评论
收起资源包目录
Java项目:在线考试系统(java+springboot+vue+jsp+mysql+maven) (486个子文件)
ExamServiceImpl.class 25KB
ExamController.class 14KB
ExamVo.class 11KB
Exam.class 11KB
QuestionVo.class 8KB
UserServiceImpl.class 8KB
Question.class 7KB
FileTransUtil.class 7KB
User.class 7KB
ExamCreateVo.class 6KB
UserInfoVo.class 6KB
QuestionCreateVo.class 6KB
UserController.class 5KB
QuestionCreateSimplifyVo.class 5KB
ExamRecord.class 5KB
UserVo.class 5KB
FileUtils.class 5KB
UploadDownloadController.class 4KB
QuestionDetailVo.class 4KB
ExamCardVo.class 4KB
QuestionPageVo.class 4KB
ExamPageVo.class 4KB
RecordDetailVo.class 4KB
JsonData.class 4KB
Swagger2Config.class 4KB
QuestionSelectionVo.class 4KB
Role.class 4KB
ResultVO.class 3KB
LoginInterceptor.class 3KB
QuestionOptionVo.class 3KB
ExamQuestionTypeVo.class 3KB
RoleVo.class 3KB
Action.class 3KB
RegisterDTO.class 3KB
Page.class 3KB
QuestionCategory.class 3KB
QuestionLevel.class 3KB
PageVo.class 3KB
QuestionType.class 3KB
ExamRecordLevel.class 3KB
ExamQuestionSelectVo.class 3KB
QuestionOption.class 3KB
ExamRecordVo.class 3KB
ActionVo.class 3KB
ExamDetailVo.class 3KB
LoginQo.class 3KB
ResultEnum.class 2KB
QuestionOptionCreateVo.class 2KB
JwtUtils.class 2KB
UploadModel.class 2KB
UploadModel2.class 2KB
ExamService.class 2KB
QuestionEnum.class 2KB
RoleEnum.class 2KB
CORSConf$1.class 2KB
LoginTypeEnum.class 2KB
DownloadQo.class 2KB
IntercepterConfig.class 1KB
ResultVOUtil.class 1KB
QuestionRepository.class 1KB
CORSConf.class 1KB
ExamException.class 964B
ExamRepository.class 848B
ExamApplication.class 751B
ExamRecordRepository.class 604B
UserService.class 580B
UserRepository.class 539B
QuestionCategoryRepository.class 399B
ExamRecordLevelRepository.class 396B
QuestionOptionRepository.class 392B
QuestionLevelRepository.class 390B
QuestionTypeRepository.class 387B
ActionRepository.class 369B
PageRepository.class 363B
RoleRepository.class 363B
.classpath 1KB
nginx.conf 986B
loading.css 2KB
loading.css 307B
Dockerfile 255B
.editorconfig 659B
.env 42B
.gitattributes 26B
.gitignore 278B
.gitignore 214B
.gitignore 52B
html_code_segment.html 2KB
index.html 2KB
loading.html 186B
exam.iml 12KB
ExamServiceImpl.java 31KB
ExamController.java 10KB
UserServiceImpl.java 7KB
FileUtils.java 5KB
FileTransUtil.java 5KB
UserController.java 4KB
LoginInterceptor.java 4KB
UploadDownloadController.java 3KB
ExamService.java 3KB
Swagger2Config.java 3KB
共 486 条
- 1
- 2
- 3
- 4
- 5
资源评论
- qq_371776032022-07-07资源质量不错,和资源描述一致,内容详细,对我很有用。
- E_lumine2022-03-02用户下载后在一定时间内未进行评价,系统默认好评。
beyondwild
- 粉丝: 9247
- 资源: 4905
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功