github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add vc-table demo

pull/165/head
tangjinzhou 2018-03-27 19:43:22 +08:00
parent 820254cd73
commit d409ad7c25
8 changed files with 286 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
components/vc-table/demo/fixedColumns.js Normal file
View File

@ -0,0 +1,48 @@
/* eslint-disable no-console,func-names,react/no-multi-comp */
import Table from '../index'
import '../assets/index.less'
const data = [
{ a: '123', b: 'xxxxxxxx', d: 3, key: '1' },
{ a: 'cdd', b: 'edd12221', d: 3, key: '2' },
{ a: '133', c: 'edd12221', d: 2, key: '3' },
{ a: '133', c: 'edd12221', d: 2, key: '4' },
{ a: '133', c: 'edd12221', d: 2, key: '5' },
{ a: '133', c: 'edd12221', d: 2, key: '6' },
{ a: '133', c: 'edd12221', d: 2, key: '7' },
{ a: '133', c: 'edd12221', d: 2, key: '8' },
{ a: '133', c: 'edd12221', d: 2, key: '9' },
]
export default {
data () {
this.columns = [
{ title: 'title1', dataIndex: 'a', key: 'a', width: '100px', fixed: 'left' },
{ title: 'title2', dataIndex: 'b', key: 'b', width: '100px', fixed: 'left' },
{ title: 'title3', dataIndex: 'c', key: 'c' },
{ title: 'title4', dataIndex: 'b', key: 'd' },
{ title: 'title5', dataIndex: 'b', key: 'e' },
{ title: 'title6', dataIndex: 'b', key: 'f' },
{ title: <div>title7<br /><br /><br />Hello world!</div>, dataIndex: 'b', key: 'g' },
{ title: 'title8', dataIndex: 'b', key: 'h' },
{ title: 'title9', dataIndex: 'b', key: 'i' },
{ title: 'title10', dataIndex: 'b', key: 'j' },
{ title: 'title11', dataIndex: 'b', key: 'k' },
{ title: 'title12', dataIndex: 'b', key: 'l', width: '100px', fixed: 'right' },
]
return {}
},
render () {
return (
<div style={{ width: '800px' }}>
<h2>Fixed columns</h2>
<Table
columns={this.columns}
expandedRowRender={record => record.key}
expandIconAsCell
scroll={{ x: 1200 }}
data={data}
/>
</div>
)
},
}

40
components/vc-table/demo/fixedColumnsAndHeader.js Normal file
View File

@ -0,0 +1,40 @@
/* eslint-disable no-console,func-names,react/no-multi-comp */
import Table from '../index'
import '../assets/index.less'
const columns = [
{ title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
{ title: 'title2', dataIndex: 'b', key: 'b', width: 100, fixed: 'left' },
{ title: 'title3', dataIndex: 'c', key: 'c', width: 150 },
{ title: 'title4', dataIndex: 'c', key: 'd', width: 150 },
{ title: 'title5', dataIndex: 'c', key: 'e', width: 150 },
{ title: 'title6', dataIndex: 'c', key: 'f', width: 150 },
{ title: 'title7', dataIndex: 'c', key: 'g', width: 150 },
{ title: 'title8', dataIndex: 'c', key: 'h', width: 150 },
{ title: 'title9', dataIndex: 'b', key: 'i', width: 150 },
{ title: 'title10', dataIndex: 'b', key: 'j', width: 150 },
{ title: 'title11', dataIndex: 'b', key: 'k', width: 150 },
{ title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' },
]
const data = [
{ a: 'aaa', b: 'bbb', c: '内容内容内容内容内容', d: 3, key: '1' },
{ a: 'aaa', b: 'bbb', c: '内容内容内容内容内容', d: 3, key: '2' },
{ a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '3' },
{ a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '4' },
{ a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '5' },
{ a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '6' },
{ a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '7' },
{ a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '8' },
{ a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '9' },
]
export default {
render () {
return (
<div>
<h2>Fixed columns and header</h2>
<Table columns={columns} scroll={{ x: 1650, y: 300 }} data={data} style={{ width: '800px' }} />
</div>
)
},
}

40
components/vc-table/demo/fixedColumnsAndHeaderSyncRowHeight.js Normal file
View File

@ -0,0 +1,40 @@
/* eslint-disable no-console,func-names,react/no-multi-comp */
import Table from '../index'
import '../assets/index.less'
const columns = [
{ title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
{ title: 'title2', dataIndex: 'b', key: 'b', width: 100, fixed: 'left' },
{ title: 'titletitle3', dataIndex: 'c', key: 'c' },
{ title: 'title4', dataIndex: 'c', key: 'd', width: 150 },
{ title: 'title5', dataIndex: 'c', key: 'e', width: 150 },
{ title: 'title6', dataIndex: 'c', key: 'f', width: 150 },
{ title: 'title7', dataIndex: 'c', key: 'g', width: 150 },
{ title: 'title8', dataIndex: 'c', key: 'h', width: 150 },
{ title: 'title9', dataIndex: 'b', key: 'i', width: 150 },
{ title: 'title10', dataIndex: 'b', key: 'j', width: 150 },
{ title: 'title11', dataIndex: 'b', key: 'k', width: 150 },
{ title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' },
]
const data = [
{ a: 'aaa', b: 'bbb', c: '内容内容内容内容内容', d: 3, key: '1' },
{ a: 'aaa', b: 'bbb', c: '内容内容内容内容内容', d: 3, key: '2' },
{ a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '3' },
{ a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '4' },
{ a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '5' },
{ a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '6' },
{ a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '7' },
{ a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '8' },
{ a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '9' },
]
export default {
render () {
return (
<div>
<h2>Fixed columns and header, resize window for test</h2>
<Table columns={columns} scroll={{ x: '150%', y: 300 }} data={data} />
</div>
)
},
}

100
components/vc-table/demo/grouping-columns.js Normal file
View File

@ -0,0 +1,100 @@
/* eslint-disable no-console,func-names,react/no-multi-comp */
import Table from '../index'
import '../assets/index.less'
import '../assets/bordered.less'
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '其它',
children: [
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
children: [
{
title: '街道',
dataIndex: 'street',
key: 'street',
},
{
title: '小区',
children: [
{
title: '单元',
dataIndex: 'building',
key: 'building',
},
{
title: '门牌',
dataIndex: 'number',
key: 'number',
},
],
},
],
},
],
},
{
title: '公司',
children: [
{
title: '地址',
dataIndex: 'companyAddress',
key: 'companyAddress',
},
{
title: '名称',
dataIndex: 'companyName',
key: 'companyName',
},
],
},
{
title: '性别',
dataIndex: 'gender',
key: 'gender',
},
]
const data = [{
key: '1',
name: '胡彦斌',
age: 32,
street: '拱墅区和睦街道',
building: 1,
number: 2033,
companyAddress: '西湖区湖底公园',
companyName: '湖底有限公司',
gender: '男',
}, {
key: '2',
name: '胡彦祖',
age: 42,
street: '拱墅区和睦街道',
building: 3,
number: 2035,
companyAddress: '西湖区湖底公园',
companyName: '湖底有限公司',
gender: '男',
}]
export default {
render () {
return (
<div>
<h2>grouping columns</h2>
<Table columns={columns} data={data} class='bordered' />
</div>
)
},
}

47
components/vc-table/demo/key.js Normal file
View File

@ -0,0 +1,47 @@
/* eslint-disable no-console,func-names,react/no-multi-comp */
import Table from '../index'
import '../assets/index.less'
export default {
data () {
return {
data: [{ a: '123' }, { a: 'cdd', b: 'edd' }, { a: '1333', c: 'eee', d: 2 }],
}
},
methods: {
remove (index) {
const rows = this.data
rows.splice(index, 1)
this.data = rows
},
handleClick (index) {
this.remove(index)
},
checkbox (h, a) {
return <label>
<input type='checkbox' />
{a}
</label>
},
renderAction (h, o, row, index) {
return <a href='javascript:;' onClick={() => this.handleClick(index)}>Delete</a>
},
},
render () {
const columns = [
{ title: 'title1', dataIndex: 'a', key: 'a', width: 100, render: this.checkbox },
{ title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
{ title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
{ title: 'Operations', dataIndex: '', key: 'x', render: this.renderAction },
]
return (
<Table columns={columns} data={this.data} class='table' rowKey={record => record.a} />
)
},
}

2
components/vc-table/src/BaseTable.jsx
View File

@ -159,7 +159,7 @@ const BaseTable = {
if (scroll.x === true) {
tableStyle.tableLayout = 'fixed'
} else {
tableStyle.width = `${scroll.x}px`
tableStyle.width = typeof scroll.x === 'number' ? `${scroll.x}px` : scroll.x
}
}

8
components/vc-table/src/BodyTable.jsx
View File

@ -29,7 +29,7 @@ export default {
updateTableRef () {
this.$nextTick(() => {
this.$refs.fixedColumnsBodyLeft && this.table.saveChildrenRef('fixedColumnsBodyLeft', this.$refs.fixedColumnsBodyLeft)
this.$refs.fixedColumnsBodyRight && this.table.saveChildrenRef('fixedColumnsBodyRight', this.$refs.fixedColumnsBodyLeft)
this.$refs.fixedColumnsBodyRight && this.table.saveChildrenRef('fixedColumnsBodyRight', this.$refs.fixedColumnsBodyRight)
this.$refs.bodyTable && this.table.saveChildrenRef('bodyTable', this.$refs.bodyTable)
})
},
@ -59,11 +59,13 @@ export default {
if (scroll.y) {
// maxHeight will make fixed-Table scrolling not working
// so we only set maxHeight to body-Table here
let maxHeight = bodyStyle.maxHeight || scroll.y
maxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
if (fixed) {
innerBodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y
innerBodyStyle.maxHeight = maxHeight
innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll'
} else {
bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y
bodyStyle.maxHeight = maxHeight
}
bodyStyle.overflowY = bodyStyle.overflowY || 'scroll'
useFixedHeader = true

11
components/vc-table/src/Table.jsx
View File

@ -279,7 +279,6 @@ export default {
shallowequal(state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
return
}
console.log(fixedColumnsHeadRowsHeight, fixedColumnsBodyRowsHeight)
this.store.setState({
fixedColumnsHeadRowsHeight,
fixedColumnsBodyRowsHeight,
@ -323,14 +322,14 @@ export default {
handleBodyScrollTop (e) {
const target = e.target
const { scroll = {}} = this
const { ref_headTable, ref_bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this
const { ref_headTable, ref_bodyTable, ref_fixedColumnsBodyLeft, ref_fixedColumnsBodyRight } = this
if (target.scrollTop !== this.lastScrollTop && scroll.y && target !== ref_headTable) {
const scrollTop = target.scrollTop
if (fixedColumnsBodyLeft && target !== fixedColumnsBodyLeft) {
fixedColumnsBodyLeft.scrollTop = scrollTop
if (ref_fixedColumnsBodyLeft && target !== ref_fixedColumnsBodyLeft) {
ref_fixedColumnsBodyLeft.scrollTop = scrollTop
}
if (fixedColumnsBodyRight && target !== fixedColumnsBodyRight) {
fixedColumnsBodyRight.scrollTop = scrollTop
if (ref_fixedColumnsBodyRight && target !== ref_fixedColumnsBodyRight) {
ref_fixedColumnsBodyRight.scrollTop = scrollTop
}
if (ref_bodyTable && target !== ref_bodyTable) {
ref_bodyTable.scrollTop = scrollTop