done vc-table

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

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 <a href='#'>Operations</a>
         },
       },

components/vc-table/demo/jsx.js

@@ -16,7 +16,8 @@ export default {
       <div>
         <h2>JSX table</h2>
         <Table data={data}>
-          <ColumnGroup title='Bazinga'>
+          <ColumnGroup>
+            <span slot='title'>Bazingakkkk</span>
             <Column
               title='title1'
               dataIndex='a'
@@ -41,8 +42,12 @@ export default {
             title='Operations'
             dataIndex=''
             key='d'
-            render={() => <a href='#'>Operations</a>}
+            // render={() => <a href='#'>Operations</a>}
-          />
+            scopedSlots= {
+              { render: () => <a href='#'>Operations</a> }
+            }
+          >
+          </Column>
         </Table>
       </div>
     )

components/vc-table/demo/rowAndCellClick.js

@@ -28,8 +28,10 @@ const columns = [{
     <span>{text} (Trigger Cell Click)</span>
   ),
   onCell: (record) => ({
-    onClick (e) {
+    on: {
-      console.log('Click cell', record, e.target)
+      click (e) {
+        console.log('Click cell', record, e.target)
+      },
     },
   }),
 }, {

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'
-
+import { getOptionProps, getKey, getClass,
-Table.Column = Column
+  getStyle, getEvents, getSlotOptions, camelize, getSlots,
-Table.ColumnGroup = ColumnGroup
+} 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 (
+      <T {...tProps}/>
+    )
+  },
+}
 
 export default Table
 export { Column, ColumnGroup }

components/vc-table/src/ColumnManager.jsx

@@ -1,6 +1,6 @@
 export default class ColumnManager {
-  constructor (columns, elements) {
+  constructor (columns) {
-    this.columns = columns || this.normalize(elements)
+    this.columns = columns
     this._cached = {}
   }
 
@@ -103,27 +103,8 @@ export default class ColumnManager {
     })
   }
 
-  normalize (elements) {
+  reset (columns) {
-    const columns = []
+    this.columns = 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)
     this._cached = {}
   }
 

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

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

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(() => {

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 [