inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 Table 重封装组件说明
I 2 ====
3
4
5 封装说明
6 ----
7
8 >  基础的使用方式与 API 与 [官方版(Table)](https://vuecomponent.github.io/ant-design-vue/components/table-cn/) 本一致,在其基础上,封装了加载数据的方法。
9 >
10 > 你无需在你是用表格的页面进行分页逻辑处理,仅需向 Table 组件传递绑定 `:data="Promise"` 对象即可
11
12 该 `table` 由 [@Saraka](https://github.com/saraka-tsukai) 完成封装
13
14 由 `小诺` 完成二次改进使用
15
16 例子1
17 ----
18 (基础使用)
19
20 ```vue
21
22 <template>
23   <s-table
24     ref="table"
25     :rowKey="(record) => record.data.id"
26     :columns="columns"
27     :data="loadData"
28     :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
29   >
30   </s-table>
31 </template>
32
33 <script>
34   import STable from '@/components'
35
36   export default {
37     components: {
38       STable
39     },
40     data() {
41       return {
42         columns: [
43           {
44             title: '规则编号',
45             dataIndex: 'no'
46           },
47           {
48             title: '描述',
49             dataIndex: 'description'
50           },
51           {
52             title: '服务调用次数',
53             dataIndex: 'callNo',
54             sorter: true,
55             needTotal: true,
56             customRender: (text) => text + ' 次'
57           },
58           {
59             title: '状态',
60             dataIndex: 'status',
61             needTotal: true
62           },
63           {
64             title: '更新时间',
65             dataIndex: 'updatedAt',
66             sorter: true
67           }
68         ],
69         // 查询条件参数
70         queryParam: {},
71         // 加载数据方法 必须为 Promise 对象
72         loadData: parameter => {
73           return this.$http.get('/service', {
74             params: Object.assign(parameter, this.queryParam)
75           }).then(res => {
76             return res.result
77           })
78         },
79         selectedRowKeys: [],
80         selectedRows: []
81       }
82     },
83     methods: {
84       onSelectChange (selectedRowKeys, selectedRows) {
85          this.selectedRowKeys = selectedRowKeys
86          this.selectedRows = selectedRows
87        }
88     }
89   }
90 </script>
91
92 ```
93
94
95
96 例子2
97 ----
98
99 (简单的表格,最后一列是各种操作)
100
101 ```vue
102 <template>
103   <s-table
104     ref="table"
105     :columns="columns"
106     :data="loadData"
107   >
108     <span slot="action" slot-scope="text, record">
109       <a>编辑</a>
110       <a-divider type="vertical"/>
111       <a-dropdown>
112         <a class="ant-dropdown-link">
113           更多 <a-icon type="down"/>
114         </a>
115         <a-menu slot="overlay">
116           <a-menu-item>
117             <a href="javascript:;">1st menu item</a>
118           </a-menu-item>
119           <a-menu-item>
120             <a href="javascript:;">2nd menu item</a>
121           </a-menu-item>
122           <a-menu-item>
123             <a href="javascript:;">3rd menu item</a>
124           </a-menu-item>
125         </a-menu>
126       </a-dropdown>
127     </span>
128   </s-table>
129 </template>
130
131 <script>
132   import STable from '@/components/table/'
133
134   export default {
135     components: {
136       STable
137     },
138     data() {
139       return {
140         columns: [
141           {
142             title: '规则编号',
143             dataIndex: 'no'
144           },
145           {
146             title: '描述',
147             dataIndex: 'description'
148           },
149           {
150             title: '服务调用次数',
151             dataIndex: 'callNo',
152           },
153           {
154             title: '状态',
155             dataIndex: 'status',
156           },
157           {
158             title: '更新时间',
159             dataIndex: 'updatedAt',
160           },
161           {
162             table: '操作',
163             dataIndex: 'action',
164             scopedSlots: {customRender: 'action'},
165           }
166         ],
167         // 查询条件参数
168         queryParam: {},
169         // 加载数据方法 必须为 Promise 对象
170         loadData: parameter => {
171           return this.$http.get('/service', {
172             params: Object.assign(parameter, this.queryParam)
173           }).then(res => {
174             return res.result
175           })
176         },
177       }
178     },
179     methods: {
180       edit(row) {
181         // axios 发送数据到后端 修改数据成功后
182         // 调用 refresh() 重新加载列表数据
183         // 这里 setTimeout 模拟发起请求的网络延迟..
184         setTimeout(() => {
185           this.$refs.table.refresh() // refresh() 不传参默认值 false 不刷新到分页第一页
186         }, 1500)
187
188       }
189     }
190   }
191 </script>
192 ```
193
194
195
196 内置方法
197 ----
198
199 通过 `this.$refs.table` 调用
200
201 `this.$refs.table.refresh(true)` 刷新列表 (用户新增/修改数据后,重载列表数据)
202
203 > 注意:要调用 `refresh(bool)` 需要给表格组件设定 `ref` 值
204 >
205 > `refresh()` 方法可以传一个 `bool` 值,当有传值 或值为 `true` 时,则刷新时会强制刷新到第一页(常用户页面 搜索 按钮进行搜索时,结果从第一页开始分页)
206
207
208 内置属性
209 ----
210 > 除去 `a-table` 自带属性外,还而外提供了一些额外属性属性  
211
212
213 | 属性           | 说明                                            | 类型              | 默认值 |
214 | -------------- | ----------------------------------------------- | ----------------- | ------ |
215 | alert          | 设置是否显示表格信息栏                          | [object, boolean] | null   |
216 | showPagination | 显示分页选择器,可传 'auto' \| boolean          | [string, boolean] | 'auto' |
217 | data           | 加载数据方法 必须为 `Promise` 对象 **必须绑定** | Promise           | -      |
218
219
220 `alert` 属性对象:
221
222 ```javascript
223 alert: {
224   show: Boolean, 
225   clear: [Function, Boolean]
226 }
227 ```
228
229 注意事项
230 ----
231
232 > 你可能需要为了与后端提供的接口返回结果一致而去修改以下代码:
233 > (需要注意的是,这里的修改是全局性的,意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。)
234 >
235 > 文档中的结构有可能由于组件 bug 进行修正而改动。实际修改请以当时最新版本为准
236
237 修改 `@/components/table/index.js`  第 156 行起
238
239
240
241 ```javascript
242 result.then(r => {
243           this.localPagination = this.showPagination && Object.assign({}, this.localPagination, {
244             current: r.pageNo, // 返回结果中的当前分页数
245             total: r.totalCount, // 返回结果中的总记录数
246             showSizeChanger: this.showSizeChanger,
247             pageSize: (pagination && pagination.pageSize) ||
248               this.localPagination.pageSize
249           }) || false
250           // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
251           if (r.data.length === 0 && this.showPagination && this.localPagination.current > 1) {
252             this.localPagination.current--
253             this.loadData()
254             return
255           }
256
257           // 这里用于判断接口是否有返回 r.totalCount 且 this.showPagination = true 且 pageNo 和 pageSize 存在 且 totalCount 小于等于 pageNo * pageSize 的大小
258           // 当情况满足时,表示数据不满足分页大小,关闭 table 分页功能
259           try {
260             if ((['auto', true].includes(this.showPagination) && r.totalCount <= (r.pageNo * this.localPagination.pageSize))) {
261               this.localPagination.hideOnSinglePage = true
262             }
263           } catch (e) {
264             this.localPagination = false
265           }
266           console.log('loadData -> this.localPagination', this.localPagination)
267           this.localDataSource = r.data // 返回结果中的数组数据
268           this.localLoading = false
269         })
270 ```
271 返回 JSON 例子:
272 ```json
273 {
274   "message": "",
275   "result": {
276     "data": [{
277         id: 1,
278         cover: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
279         title: 'Alipay',
280         description: '那是一种内在的东西, 他们到达不了,也无法触及的',
281         status: 1,
282         updatedAt: '2018-07-26 00:00:00'
283       },
284       {
285         id: 2,
286         cover: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
287         title: 'Angular',
288         description: '希望是一个好东西,也许是最好的,好东西是不会消亡的',
289         status: 1,
290         updatedAt: '2018-07-26 00:00:00'
291       },
292       {
293         id: 3,
294         cover: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
295         title: 'Ant Design',
296         description: '城镇中有那么多的酒馆,她却偏偏走进了我的酒馆',
297         status: 1,
298         updatedAt: '2018-07-26 00:00:00'
299       },
300       {
301         id: 4,
302         cover: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
303         title: 'Snowy',
304         description: '那时候我只会想自己想要什么,从不想自己拥有什么',
305         status: 1,
306         updatedAt: '2018-07-26 00:00:00'
307       },
308       {
309         id: 5,
310         cover: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
311         title: 'Bootstrap',
312         description: '凛冬将至',
313         status: 1,
314         updatedAt: '2018-07-26 00:00:00'
315       },
316       {
317         id: 6,
318         cover: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png',
319         title: 'Vue',
320         description: '生命就像一盒巧克力,结果往往出人意料',
321         status: 1,
322         updatedAt: '2018-07-26 00:00:00'
323       }
324     ],
325     "pageSize": 10,
326     "pageNo": 0,
327     "totalPage": 6,
328     "totalCount": 57
329   },
330   "status": 200,
331   "timestamp": 1534955098193
332 }
333 ```
334
335
336
337 更新时间
338 ----
339
340 该文档最后更新于: 2019-06-23 PM 17:19