From d7568ffb8a1c566589c6b3ab7fca0a523529a719 Mon Sep 17 00:00:00 2001 From: Cyrilszq Date: Wed, 28 Jun 2017 16:04:55 +0800 Subject: [PATCH] close #28 --- src/components/Table/Table.vue | 8 +++- src/components/Table/demo/pagination.md | 2 +- src/components/Table/test/table.test.js | 56 +++++++++++++++++++++++-- 3 files changed, 60 insertions(+), 6 deletions(-) diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue index f624fd44..4c454c4a 100644 --- a/src/components/Table/Table.vue +++ b/src/components/Table/Table.vue @@ -296,7 +296,13 @@ export default { }, sortAction (column, index, order) { if (typeof column.sorter === 'function') { - // TODO:客户端排序 + this.originDataSource.sort((a, b) => { + const result = column.sorter(a, b) + if (result !== 0) { + return (order === 'descend') ? -result : result + } + return 0 + }) } this.sorderOrder[index] = order this.sorderOrder = Object.assign([], this.sorderOrder) diff --git a/src/components/Table/demo/pagination.md b/src/components/Table/demo/pagination.md index ddd856e5..87cfc68a 100644 --- a/src/components/Table/demo/pagination.md +++ b/src/components/Table/demo/pagination.md @@ -70,7 +70,7 @@ for (let i = 0; i < 46; i++) { data.push({ key: i, name: `李大嘴${i}`, - age: 32, + age: 10 + i, address: `西湖区湖底公园${i}号`, }); } diff --git a/src/components/Table/test/table.test.js b/src/components/Table/test/table.test.js index c85f0b93..5a894e17 100644 --- a/src/components/Table/test/table.test.js +++ b/src/components/Table/test/table.test.js @@ -4,11 +4,19 @@ import Table from '../' var columns = [{ title: '姓名', dataIndex: 'name', + sorter: (a, b) => a.name.length - b.name.length, width: 150 }, { title: '年龄', dataIndex: 'age', - width: 250 + width: 250, + filters: [{ + text: '32', + value: '32' + }, { + text: '42', + value: '42' + }] }, { title: '地址', dataIndex: 'address', @@ -27,7 +35,7 @@ var columns = [{ var data = [{ key: '1', - name: '-1条', + name: '一', age: 32, address: '南湖区湖底公园1号' }, { @@ -83,7 +91,8 @@ let vm = new Vue({ loading: false, gridData: data, gridColumns: columns, - rowSelection: rowSelection + rowSelection: rowSelection, + selectRow: '' } }, template: ` @@ -96,7 +105,7 @@ let vm = new Vue({ }, methods: { rowClick (rowIndex, record) { - console.log(rowIndex, record) + this.selectRow = rowIndex }, getData () { let self = this @@ -110,6 +119,7 @@ let vm = new Vue({ // table组件测试用例,拉低了coverage summary统计数据 describe('Table', () => { it('Table组件基础渲染', () => { + expect(vm.$el.querySelectorAll('table thead tr th').length).to.equal(columns.length) expect(vm.$el.querySelectorAll('table tbody tr').length).to.equal(6) }) @@ -120,6 +130,24 @@ describe('Table', () => { }) }) + it('Table行点击', () => { + vm.$el.querySelectorAll('table tbody tr')[1].click() + expect(vm.selectRow).to.equal(1) + }) + + it('Table排序', () => { + let ascend = vm.$el.querySelector('.atui-table-sorter .atui-icon-caretup') + let descend = vm.$el.querySelector('.atui-table-sorter .atui-icon-caretdown') + ascend.click() + vm.$nextTick(() => { + expect(vm.$el.querySelectorAll('table tbody tr td span')[0].textContent).to.equal('一') + }) + descend.click() + vm.$nextTick(() => { + expect(vm.$el.querySelectorAll('table tbody tr td span')[0].textContent).to.equal('李秀莲大嘴哥') + }) + }) + it('展示分页', () => { vm.pagination = { total: 60 @@ -127,5 +155,25 @@ describe('Table', () => { vm.$nextTick(() => { expect(vm.$el.querySelectorAll('.atui-table-pagination').length).to.equal(1) }) + vm.pagination = false + vm.$nextTick(() => { + expect(vm.$el.querySelectorAll('.atui-table-pagination').length).to.equal(0) + }) + }) + + it('点击分页按钮时table正确切换', () => { + vm.pagination = { + total: 6, + pageSize: 5, + currPage: 1 + } + vm.$nextTick(() => { + let p = vm.$el.querySelectorAll('.atui-table-pagination') + expect(p.length).to.equal(2) + p[1].click() + vm.$nextTick(() => { + expect(vm.$el.querySelectorAll('table tbody tr').length).to.equal(1) + }) + }) }) })