From b2d5503768d57304cc12f53bfa51cc7f6e2447d7 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Thu, 29 Mar 2018 18:18:41 +0800
Subject: [PATCH] done vc-table
---
components/_util/props-util.js | 16 ++++++
components/vc-table/demo/className.js | 2 +-
components/vc-table/demo/jsx.js | 11 +++-
components/vc-table/demo/rowAndCellClick.js | 6 +-
components/vc-table/index.js | 62 +++++++++++++++++++--
components/vc-table/src/ColumnManager.jsx | 27 ++-------
components/vc-table/src/Table.jsx | 10 +---
components/vc-table/src/TableCell.jsx | 7 ++-
components/vc-table/src/TableRow.jsx | 10 ----
examples/routes.js | 2 +-
10 files changed, 97 insertions(+), 56 deletions(-)
diff --git a/components/_util/props-util.js b/components/_util/props-util.js
index 8aec27a94..651109a9a 100644
--- a/components/_util/props-util.js
+++ b/components/_util/props-util.js
@@ -39,6 +39,20 @@ const filterProps = (props, propsData = {}) => {
})
return res
}
+const getSlots = (ele) => {
+ let componentOptions = ele.componentOptions
+ if (ele.$vnode) {
+ componentOptions = ele.$vnode.componentOptions
+ }
+ const children = componentOptions.children || []
+ const slots = {}
+ children.forEach(child => {
+ const name = (child.data && child.data.slot) || 'default'
+ slots[name] = slots[name] || []
+ slots[name].push(child)
+ })
+ return slots
+}
const getSlotOptions = (ele) => {
let componentOptions = ele.componentOptions
if (ele.$vnode) {
@@ -221,5 +235,7 @@ export {
parseStyleText,
initDefaultProps,
isValidElement,
+ camelize,
+ getSlots,
}
export default hasProp
diff --git a/components/vc-table/demo/className.js b/components/vc-table/demo/className.js
index 9413ea545..35336108e 100644
--- a/components/vc-table/demo/className.js
+++ b/components/vc-table/demo/className.js
@@ -22,7 +22,7 @@ export default {
{
title: 'Operations', dataIndex: '',
className: 'd',
- key: 'd', render (h) {
+ key: 'd', render () {
return Operations
},
},
diff --git a/components/vc-table/demo/jsx.js b/components/vc-table/demo/jsx.js
index 655024d93..c6f2b79b1 100644
--- a/components/vc-table/demo/jsx.js
+++ b/components/vc-table/demo/jsx.js
@@ -16,7 +16,8 @@ export default {
)
diff --git a/components/vc-table/demo/rowAndCellClick.js b/components/vc-table/demo/rowAndCellClick.js
index 7f44d195a..fd8878b88 100644
--- a/components/vc-table/demo/rowAndCellClick.js
+++ b/components/vc-table/demo/rowAndCellClick.js
@@ -28,8 +28,10 @@ const columns = [{
{text} (Trigger Cell Click)
),
onCell: (record) => ({
- onClick (e) {
- console.log('Click cell', record, e.target)
+ on: {
+ click (e) {
+ console.log('Click cell', record, e.target)
+ },
},
}),
}, {
diff --git a/components/vc-table/index.js b/components/vc-table/index.js
index c4a842cdc..518e79aca 100644
--- a/components/vc-table/index.js
+++ b/components/vc-table/index.js
@@ -1,9 +1,63 @@
-import Table from './src/Table'
+import T from './src/Table'
import Column from './src/Column'
import ColumnGroup from './src/ColumnGroup'
-
-Table.Column = Column
-Table.ColumnGroup = ColumnGroup
+import { getOptionProps, getKey, getClass,
+ getStyle, getEvents, getSlotOptions, camelize, getSlots,
+} from '../_util/props-util'
+const Table = {
+ name: 'Table',
+ Column,
+ ColumnGroup,
+ props: T.props,
+ methods: {
+ normalize (elements = []) {
+ const columns = []
+ elements.forEach(element => {
+ if (!element.tag) {
+ return
+ }
+ const key = getKey(element)
+ const style = getStyle(element)
+ const cls = getClass(element)
+ const props = getOptionProps(element)
+ const events = getEvents(element)
+ const listeners = {}
+ Object.keys(events).forEach(e => {
+ const k = `on_${e}`
+ listeners[camelize(k)] = events[e]
+ })
+ const { default: children, title } = getSlots(element)
+ const column = { title, ...props, style, class: cls, ...listeners }
+ if (key) {
+ column.key = key
+ }
+ if (getSlotOptions(element).isTableColumnGroup) {
+ column.children = this.normalize(children)
+ } else {
+ const render = element.data && element.data.scopedSlots && element.data.scopedSlots.render
+ column.render = column.render || render
+ }
+ columns.push(column)
+ })
+ return columns
+ },
+ },
+ render () {
+ const { $listeners, $slots, normalize } = this
+ const props = getOptionProps(this)
+ const columns = props.columns || normalize($slots.default)
+ const tProps = {
+ props: {
+ ...props,
+ columns,
+ },
+ on: $listeners,
+ }
+ return (
+
+ )
+ },
+}
export default Table
export { Column, ColumnGroup }
diff --git a/components/vc-table/src/ColumnManager.jsx b/components/vc-table/src/ColumnManager.jsx
index b0696baaf..3f7c47b1f 100644
--- a/components/vc-table/src/ColumnManager.jsx
+++ b/components/vc-table/src/ColumnManager.jsx
@@ -1,6 +1,6 @@
export default class ColumnManager {
- constructor (columns, elements) {
- this.columns = columns || this.normalize(elements)
+ constructor (columns) {
+ this.columns = columns
this._cached = {}
}
@@ -103,27 +103,8 @@ export default class ColumnManager {
})
}
- normalize (elements) {
- const columns = []
- elements.forEach(element => {
- if (!element.tag) {
- return
- }
- debugger
- const column = { ...element.props }
- if (element.key) {
- column.key = element.key
- }
- if (element.type.isTableColumnGroup) {
- column.children = this.normalize(column.children)
- }
- columns.push(column)
- })
- return columns
- }
-
- reset (columns, elements) {
- this.columns = columns || this.normalize(elements)
+ reset (columns) {
+ this.columns = columns
this._cached = {}
}
diff --git a/components/vc-table/src/Table.jsx b/components/vc-table/src/Table.jsx
index 227bb1d10..b20b7f453 100644
--- a/components/vc-table/src/Table.jsx
+++ b/components/vc-table/src/Table.jsx
@@ -115,7 +115,7 @@ export default {
data () {
this.preData = [...this.data]
return {
- columnManager: new ColumnManager(this.columns, this.$slots.default),
+ columnManager: new ColumnManager(this.columns),
sComponents: merge({
table: 'table',
header: {
@@ -177,14 +177,6 @@ export default {
})
},
- componentWillReceiveProps (nextProps) {
- if (nextProps.columns && nextProps.columns !== this.props.columns) {
- this.columnManager.reset(nextProps.columns)
- } else if (nextProps.children !== this.props.children) {
- this.columnManager.reset(null, nextProps.children)
- }
- },
-
updated (prevProps) {
if (this.columnManager.isAnyColumnsFixed()) {
this.handleWindowResize()
diff --git a/components/vc-table/src/TableCell.jsx b/components/vc-table/src/TableCell.jsx
index 8ae309633..73662cf18 100644
--- a/components/vc-table/src/TableCell.jsx
+++ b/components/vc-table/src/TableCell.jsx
@@ -1,6 +1,6 @@
import PropTypes from '../../_util/vue-types'
import get from 'lodash/get'
-import { isValidElement } from '../../_util/props-util'
+import { isValidElement, mergeProps } from '../../_util/props-util'
export default {
name: 'TableCell',
@@ -52,7 +52,7 @@ export default {
} else {
text = get(record, dataIndex)
}
- const tdProps = {
+ let tdProps = {
props: {},
attrs: {},
class: cls,
@@ -74,7 +74,8 @@ export default {
}
if (column.onCell) {
- tdProps.attrs = { ...tdProps.attrs, ...column.onCell(record) }
+ tdProps = mergeProps(tdProps, column.onCell(record))
+ // tdProps.attrs = { ...tdProps.attrs, ...column.onCell(record) }
}
// Fix https://github.com/ant-design/ant-design/issues/1202
diff --git a/components/vc-table/src/TableRow.jsx b/components/vc-table/src/TableRow.jsx
index 21d4f28f3..3ccf1c67e 100644
--- a/components/vc-table/src/TableRow.jsx
+++ b/components/vc-table/src/TableRow.jsx
@@ -78,16 +78,6 @@ const TableRow = {
},
},
- // componentWillReceiveProps (nextProps) {
- // if (this.props.visible || (!this.props.visible && nextProps.visible)) {
- // this.shouldRender = true
- // }
- // },
-
- // shouldComponentUpdate (nextProps) {
- // return !!(this.props.visible || nextProps.visible)
- // },
-
updated () {
if (this.shouldRender && !this.rowRef) {
this.$nextTick(() => {
diff --git a/examples/routes.js b/examples/routes.js
index 136f1b381..9ea148250 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -3,7 +3,7 @@ const AsyncComp = () => {
const hashs = window.location.hash.split('/')
const d = hashs[hashs.length - 1]
return {
- component: import(`../components/vc-slider/demo/${d}`),
+ component: import(`../components/vc-table/demo/${d}`),
}
}
export default [