Table 重封装组件说明 ==== 封装说明 ---- > 基础的使用方式与 API 与 [官方版(Table)](https://vuecomponent.github.io/ant-design-vue/components/table-cn/) 本一致,在其基础上,封装了加载数据的方法。 > > 你无需在你是用表格的页面进行分页逻辑处理,仅需向 Table 组件传递绑定 `:data="Promise"` 对象即可 例子1 ---- (基础使用) ```vue <template> <s-table ref="table" :rowKey="(record) => record.data.id" size="default" :columns="columns" :data="loadData" > </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 }) }, } } } </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() }, 1500) } } } </script> ``` 内置方法 ---- 通过 `this.$refs.table` 调用 `this.$refs.table.refresh()` 刷新列表 (用户新增/修改数据后,重载列表数据) > 注意:要调用 `refresh()` 需要给表格组件设定 `ref` 值 注意事项 ---- > 你可能需要为了与后端提供的接口返回结果一致而去修改以下代码: (需要注意的是,这里的修改是全局性的,意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。) 修改 `@/components/table/index.js` 第 106 行起 ```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 }); !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.png', title: 'Ant Design Pro', description: '那时候我只会想自己想要什么,从不想自己拥有什么', status: 1, updatedAt: '2018-07-26 00:00:00' }, { id: 5, cover: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', title: 'Bootstrap', description: '凛冬将至', status: 1, updatedAt: '2018-07-26 00:00:00' }, { id: 6, cover: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', title: 'Vue', description: '生命就像一盒巧克力,结果往往出人意料', status: 1, updatedAt: '2018-07-26 00:00:00' } ], "pageSize": 10, "pageNo": 0, "totalPage": 6, "totalCount": 57 }, "status": 200, "timestamp": 1534955098193 } ``` 更新时间 ---- 该文档最后更新于: 2018-10-31 PM 08:15