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:/
没有合适的资源?快使用搜索试试~ 我知道了~
阿里云物联网设备模拟器
共870个文件
vue:114个
js:107个
java:59个
需积分: 0 6 下载量 154 浏览量
2022-10-10
09:11:13
上传
评论
收藏 1.28MB ZIP 举报
温馨提示
当前版本是开发版,有很多bug,大家见谅 iot-helper:后端,大家用的时候,需要自行修改resource下的yml文件,把数据库、阿里云相关配置改成自己的 iot-helper-web:前端 具体使用方法,见博客https://blog.csdn.net/qq_21688139/article/details/126790707?spm=1001.2014.3001.5501;
资源详情
资源评论
资源推荐
收起资源包目录
阿里云物联网设备模拟器 (870个子文件)
00a06e14051d92aa50b8630861c458fb834067 166B
0111a9ef9b1e103ef3793106e16f9e557d2912 80B
0460033894c55066e94e4c37dc3219d4bf7a46 2KB
049389e05dd953856cfaf3e2f6c9c9a752922b 1KB
04d368130c400cbf68c4de528a4d4ce423de97 4KB
04e557b06abcd557cde901727d3af31bac286a 56B
051bbc5deb961900f746ddbc73d869fd133c19 45B
062addf3334b7f7f35ea7d2d63c54533bf556b 310B
063089647f7d7f528897f80ff52b1be6c368b5 549B
06869eeaf046ef06fc08f5fb497880704f3473 379B
06982effd43a6345e38e00a1b28260c4eb53c1 57B
06a0dfd5285129522ccff0121b6b70eadf0b29 234B
07c74404551bc301ed753a476cd6adf9007c52 197B
0a849f3ac87a1a941ede37557ace02f0e5067b 75B
0b485cecfb15c5a610e2411aa74dd87558ff8e 75B
0c8c6596a86891ce9a9223b50925c71d186613 75B
0cdd616810adabba0ba420729124faf3e8a3cb 155B
0d19390aba1875dc9f00843b7822b3e43c5790 206B
0d22998437ccdac14a83f42a8e3cf33f9473d0 190B
0d918d0300b0d69b48d20b3aedb1c6e1aac5d4 49B
0f96d470e6916d564306206cf17e398a3bb87d 45B
0fdaae0e3bfb08f1136d36589bd7148a38bdbb 48B
103cad7c41b1434891d35e32ee3778bfc02259 125B
11c8aabb6aaf556ab61d93458b173b4ebb9c66 755B
1206c7db16c39677e3d1905992505cb0b2df6b 286B
1279d1357900fdd9318d11c1c323de098eae44 46B
1320d2549a4d4eb55e12d8b31ee8d485b6d5fc 254B
13b6345ce72d03c230e33fc7d18eebe96ef5ec 49B
149348706e8d8310a81c445ab2ec099d894079 96B
14ac59f5fe68ec735989d88f5b5d9c61c7897b 2KB
1544b5c27ae2f349ddc2714d2283dac6e05b06 223B
15c0bbc8e02e273979d0fa51c863a719cecc4e 206B
16db1c0bdcb98b76195cc19236caebaa3be173 590B
1720bfd518c1d9ef518a8abd96e0db58d65216 45B
18234fe39f4ef5300972ce362c994fbf8b8e9f 256B
18a795e40f5392e1e7e48b0cc8ff5d21f085a6 79B
194f7a463e87306bf7d55e031fd350e96b320e 46B
1958cdb5c7fb48443069def1575f5c8e299367 166B
1ad47e44c240750d83b5b9e29d14a2f6fc4909 133B
1b97f4c9e0aadce904c247edfcb16e1bb42f07 200B
1c5d78b014ce75359db8cf52bc0d7bd7651168 135B
1cbd1e92e089125391a283a5cfb1404a0d7090 187B
1d2ce900aab9287726802b30b83c94c41e6e1c 626B
1d54f46f93c5e057c2df09abd11cd338996d8a 2KB
1dc9ad5f08f2e813a55b1f710f8f86c04b96dd 1KB
1dda7b047782e0da46a88f6a1b2674c170f06d 45B
1e467d98fc73e563738d1f2162d62e96a329f3 2KB
1ed9c07364b26aa70d513311f4abfb28aeb214 45B
1f1a5cc3c3e4f39c1054ad9073fec3cc5f6953 131B
1f210ad450eaa8aed2b1b2c8bb91f7d5e28368 218B
1fbcd72df0b849192b96fba4913454c83028e9 45B
1fdf5f9d7a7434aacb3a762d9f5324ea6780ab 109B
21b1a84063e324d982dbf89361908aa3d4eccf 2KB
21e89ba6bacdd699f999378e233e1ea734159c 189B
2206070e9b3ecfcb7cbcca4e3f6be9427b1a76 75B
22275aa528cd08f363d40849fb5deee92806dd 102B
2354adff6680b020f637b60b99c0cb672839e5 450B
237d3d3a9070c73b3dde5864003e3c45120c12 541B
24f5b56123a125ce370dbed1f6d925d21ed40d 2KB
2624e71889692d7e40d1124b1739d6992df4ae 74B
2643ba360b0af2c8427fed1074031d97e278a5 261B
2684e3a58ead0e451902fb5b88ad504b7364d3 323B
27588280e5434e98755b70ba116db211f87a92 206B
275bc641af3902a8e7e74a7532fcc8f2f755ae 120B
277b7e476c651da0686f523dad216896c562fd 45B
281a4cdbdb9ae5a55dcd78de5342541cc49652 207B
28b6e939d53966897765a522fe491649cc989a 254B
290f3aa92543b1c0169570d2a55a52c75bc198 273B
2a3edadaf974ef1cdb935e80a24863201b8c8c 207B
2a5a015d148094b9a2e6dd482f74681a7ee7fc 1KB
2b6df5b47647b60fee154efe6a3ee3a99bd5f3 164B
2ba125edaa8ff55635c39a35e5a3de4a0c15b3 1KB
2baf7ec773567b95cda6e065138da0f60b0a4b 207B
2ded23d6162943650fa550387fbb5626c50e3f 79B
2e65d2e8b2bc749ef68035e1544352bfe61b14 110B
2e6de8023779f1d2f552fa8795f0e216e751b5 755B
2e96d80fb293118ce1e167ceb1797c99d374d3 79B
2f16f9b0086d9aa528d3ab3f616075fca15f16 643B
2f39a27c915b669cf580da85c7e9b1c24250e1 189B
2fd15a48b8df50471e1aed64e5639becf108d0 582B
30491e72a799945593df8c1ca86c7dee90279f 223B
326e6a5041dc5551ff79624c7629e742e2c9fa 74B
329b67b52c878a9e22ca89162e94082fc66337 238B
32e8ea6fe48e36cb93e865e315aaff9f46ce6d 412B
34cd33e19e8bb11fa90044331f3aaa9ccc2b78 74B
36378653ecb01e5dfa05e591dafc1e7375aa0e 2KB
368b8fd875c0eb7c2cf2222cdefe2702f7b62c 46B
36c234fe6155621ed71cee71716d9bfa7a8b04 135B
36e8b8fcf8986043207e439e8bc4e4745c7284 79B
374c3327080e583074d1f7e093d325ee1a796e 192B
374c4a54f21a68ce42edaea63acedd1e1f78fb 2KB
39cc48eb9ee31fec96e8bdea5468ada3b05d37 2KB
3c0fd2225f4d238b0bd83f8c4e6f6bcd943a26 281B
3c90524ae0eeba1b5824ffa4d79597e99de734 254B
3c9adc5dc2fd6cd7818bfbf2334646695f63f9 864B
3cf57efb5d04069eae86caae3c798b79bc549a 1KB
3d65f7d391de742262c4382e6b097e25265f43 74B
3dfe5a42bd26264029fca596c9a719a4810fed 45B
3e25c63af66d03dc3d844680ce70b5a1038612 224B
3e9f4534b669f45076f6656cd7ac78e205321f 280B
共 870 条
- 1
- 2
- 3
- 4
- 5
- 6
- 9
你我无缘,全靠BUG
- 粉丝: 74
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- VIVADO中UART IP核使用
- 【深度学习实际案例解析】深度学习实际案例解析
- 封装swagger组件,提供全新UI以及无状态登录接口调用解决方案
- 小龙坎支局2024年4月渠道积分核对数据.xlam
- onlyoffice搭建及与alist使用的view.html
- Quadcopter-UAV-attitude-estimation-linux常用命令大全demo
- Quadcopter-UAV-attitude-estimation-based-on-数据库课程设计
- pbdlib-python-master.zip
- 43904245495352013_base.apk
- 基于springboot+vue + redis的工作流审批系统
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0