| 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 | |
