fix render to customRender

components/table/demo/basic.md

@@ -10,13 +10,29 @@ Simple table with actions.
 
 ```html
 <template>
-  <a-table :columns="columns" :dataSource="data" />
+  <a-table :columns="columns" :dataSource="data">
+    <template slot="name" slot-scope="text">
+      <a href="#">{{text}}</a>
+    </template>
+    <template slot="action" slot-scope="text, record">
+      <span>
+        <a href="#">Action 一 {{record.name}}</a>
+        <a-divider type="vertical" />
+        <a href="#">Delete</a>
+        <a-divider type="vertical" />
+        <a href="#" class="ant-dropdown-link">
+          More actions <a-icon type="down" />
+        </a>
+      </span>
+    </template>
+  </a-table>
 </template>
 <script>
 const columns = [{
   title: 'Name',
   dataIndex: 'name',
   key: 'name',
+  slotScopeName: 'name',
 }, {
   title: 'Age',
   dataIndex: 'age',
@@ -28,6 +44,7 @@ const columns = [{
 }, {
   title: 'Action',
   key: 'action',
+  slotScopeName: 'action',
 }];
 
 const data = [{

components/table/demo/template.md

@@ -0,0 +1,88 @@
+<cn>
+#### template 风格的 API
+使用 template 风格的 API
+> 这个只是一个描述 `columns` 的语法糖，所以你不能用其他组件去包裹 `Column` 和 `ColumnGroup`。
+</cn>
+
+<us>
+#### template style API
+Using template style API
+> Since this is just a syntax sugar for the prop `columns`, so that you can't compose `Column` and `ColumnGroup` with other Components.
+</us>
+
+```html
+<template>
+  <a-table :dataSource="data">
+    <a-table-column-group>
+      <span slot="title" style="color: #1890ff">Name</span>
+      <a-table-column
+        dataIndex="firstName"
+        key="firstName"
+      >
+        <span slot="title" style="color: #1890ff">First Name</span>
+      </a-table-column>
+      <a-table-column
+        title="Last Name"
+        dataIndex="lastName"
+        key="lastName"
+      />
+    </a-table-column-group>
+    <a-table-column
+      title="Age"
+      dataIndex="age"
+      key="age"
+    />
+    <a-table-column
+      title="Address"
+      dataIndex="address"
+      key="address"
+    />
+    <a-table-column
+      title="Action"
+      key="action"
+    >
+      <template slot-scope="text, record">
+        <span>
+          <a href="#">Action 一 {{record.firstName}}</a>
+          <a-divider type="vertical" />
+          <a href="#">Delete</a>
+          <a-divider type="vertical" />
+          <a href="#" class="ant-dropdown-link">
+            More actions <a-icon type="down" />
+          </a>
+        </span>
+      </template>
+    </a-table-column>
+  </a-table>
+</template>
+<script>
+
+const data = [{
+  key: '1',
+  firstName: 'John',
+  lastName: 'Brown',
+  age: 32,
+  address: 'New York No. 1 Lake Park',
+}, {
+  key: '2',
+  firstName: 'Jim',
+  lastName: 'Green',
+  age: 42,
+  address: 'London No. 1 Lake Park',
+}, {
+  key: '3',
+  firstName: 'Joe',
+  lastName: 'Black',
+  age: 32,
+  address: 'Sidney No. 1 Lake Park',
+}];
+
+export default {
+  data() {
+    return {
+      data,
+    }
+  }
+}
+</script>
+```

components/table/index.jsx

@@ -1,5 +1,80 @@
-import Table from './Table'
+import T from './Table'
 
-export * from './interface'
+import { getOptionProps, getKey, getClass,
+  getStyle, getEvents, getSlotOptions, camelize, getSlots,
+} from '../_util/props-util'
+const Table = {
+  name: 'Table',
+  Column: T.Column,
+  ColumnGroup: T.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).__ANT_TABLE_COLUMN_GROUP) {
+          column.children = this.normalize(children)
+        } else {
+          const customRender = element.data && element.data.scopedSlots && element.data.scopedSlots.default
+          column.customRender = column.customRender || customRender
+        }
+        columns.push(column)
+      })
+      return columns
+    },
+    updateColumns (cols = []) {
+      const columns = []
+      const { $slots, $scopedSlots } = this
+      cols.forEach(col => {
+        const { slotTitle, slotScopeName, ...restProps } = col
+        const column = {
+          ...restProps,
+          title: col.title || $slots[slotTitle],
+        }
+        if (slotScopeName && $scopedSlots[slotScopeName]) {
+          column.customRender = column.customRender || $scopedSlots[slotScopeName]
+        }
+        if (col.children) {
+          column.children = this.updateColumns(column.children)
+        }
+        columns.push(column)
+      })
+      return columns
+    },
+  },
+  render () {
+    const { $listeners, $slots, normalize } = this
+    const props = getOptionProps(this)
+    const columns = props.columns ? this.updateColumns(props.columns) : normalize($slots.default)
+    const tProps = {
+      props: {
+        ...props,
+        columns,
+      },
+      on: $listeners,
+    }
+    return (
+      <T {...tProps}/>
+    )
+  },
+}
 
 export default Table

components/table/interface.js

@@ -17,7 +17,7 @@ export const ColumnProps = {
   title: PropTypes.any,
   // key?: React.Key;
   dataIndex: PropTypes.string,
-  render: PropTypes.func,
+  customRender: PropTypes.func,
   filters: PropTypes.arrayOf(ColumnFilterItem),
   // onFilter: (value: any, record: T) => PropTypes.bool,
   filterMultiple: PropTypes.bool,

components/vc-table/demo/className.js

@@ -22,7 +22,7 @@ export default {
       {
         title: 'Operations', dataIndex: '',
         className: 'd',
-        key: 'd', render () {
+        key: 'd', customRender () {
           return <a href='#'>Operations</a>
         },
       },

components/vc-table/demo/colspan-rowspan.js

@@ -3,7 +3,7 @@ import Table from '../index'
 import '../assets/index.less'
 
 const columns = [
-  { title: '手机号', dataIndex: 'a', colSpan: 2, width: 100, key: 'a', render (h, o, row, index) {
+  { title: '手机号', dataIndex: 'a', colSpan: 2, width: 100, key: 'a', customRender (o, row, index) {
     const obj = {
       children: o,
       props: {},
@@ -22,7 +22,7 @@ const columns = [
     }
     return obj
   } },
-  { title: '电话', dataIndex: 'b', colSpan: 0, width: 100, key: 'b', render (h, o, row, index) {
+  { title: '电话', dataIndex: 'b', colSpan: 0, width: 100, key: 'b', customRender (o, row, index) {
     const obj = {
       children: o,
       props: {},
@@ -33,7 +33,7 @@ const columns = [
     }
     return obj
   } },
-  { title: 'Name', dataIndex: 'c', width: 100, key: 'c', render (h, o, row, index) {
+  { title: 'Name', dataIndex: 'c', width: 100, key: 'c', customRender (o, row, index) {
     const obj = {
       children: o,
       props: {},
@@ -44,7 +44,7 @@ const columns = [
     }
     return obj
   } },
-  { title: 'Address', dataIndex: 'd', width: 200, key: 'd', render (h, o, row, index) {
+  { title: 'Address', dataIndex: 'd', width: 200, key: 'd', customRender (o, row, index) {
     const obj = {
       children: o,
       props: {},
@@ -58,7 +58,7 @@ const columns = [
 
     return obj
   } },
-  { title: 'Gender', dataIndex: 'e', width: 200, key: 'e', render (h, o, row, index) {
+  { title: 'Gender', dataIndex: 'e', width: 200, key: 'e', customRender (o, row, index) {
     const obj = {
       children: o,
       props: {},
@@ -70,7 +70,7 @@ const columns = [
   } },
   {
     title: 'Operations', dataIndex: '', key: 'f',
-    render (h, o, row, index) {
+    customRender (o, row, index) {
       if (index === 5) {
         return {
           props: {

components/vc-table/demo/column-resize.js

@@ -24,7 +24,7 @@ export default {
         { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
         { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
         {
-          title: 'Operations', dataIndex: '', key: 'd', render () {
+          title: 'Operations', dataIndex: '', key: 'd', customRender () {
             return <a href='#'>Operations</a>
           },
         },

components/vc-table/demo/expandedRowRender.js

@@ -19,7 +19,7 @@ export default {
         { title: 'title 1', dataIndex: 'a', key: 'a', width: 100 },
         { title: 'title 2', dataIndex: 'b', key: 'b', width: 100 },
         { title: 'title 3', dataIndex: 'c', key: 'c', width: 200 },
-        { title: 'Operation', dataIndex: '', key: 'x', render: this.renderAction },
+        { title: 'Operation', dataIndex: '', key: 'x', customRender: this.renderAction },
       ],
     }
   },

components/vc-table/demo/fixedColumns-auto-height.js

@@ -2,22 +2,6 @@
 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' },
-  { title: 'title4', dataIndex: 'b', key: 'd' },
-  { title: 'title5', dataIndex: 'b', key: 'e' },
-  { title: 'title6', dataIndex: 'b', key: 'f',
-    render: (h) => <div style={{ height: '40px', lineHeight: '40px' }}>我很高</div> },
-  { title: 'title7', 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: 100, fixed: 'right' },
-]
-
 const data = [
   { a: '123', b: 'xxxxxxxx', d: 3, key: '1', title: 'hello' },
   { a: 'cdd', b: 'edd12221', d: 3, key: '2', title: 'hello' },
@@ -36,6 +20,21 @@ export default {
     }
   },
   render () {
+    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' },
+      { title: 'title4', dataIndex: 'b', key: 'd' },
+      { title: 'title5', dataIndex: 'b', key: 'e' },
+      { title: 'title6', dataIndex: 'b', key: 'f',
+        customRender: () => <div style={{ height: '40px', lineHeight: '40px' }}>我很高</div> },
+      { title: 'title7', 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: 100, fixed: 'right' },
+    ]
     return (
       <div style={{ width: '800px' }}>
         <h2>Fixed columns</h2>

components/vc-table/demo/jsx.js

@@ -44,7 +44,7 @@ export default {
             key='d'
             // render={() => <a href='#'>Operations</a>}
             scopedSlots= {
-              { render: () => <a href='#'>Operations</a> }
+              { default: () => <a href='#'>Operations</a> }
             }
           >
           </Column>

components/vc-table/demo/key.js

@@ -20,24 +20,24 @@ export default {
       this.remove(index)
     },
 
-    checkbox (h, a) {
+    checkbox (a) {
       return <label>
         <input type='checkbox' />
         {a}
       </label>
     },
 
-    renderAction (h, o, row, index) {
+    renderAction (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: 'title1', dataIndex: 'a', key: 'a', width: 100, customRender: 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 },
+      { title: 'Operations', dataIndex: '', key: 'x', customRender: this.renderAction },
     ]
     return (
       <Table columns={columns} data={this.data} class='table' rowKey={record => record.a} />

components/vc-table/demo/no-data.js

@@ -11,7 +11,7 @@ export default {
       { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
       { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
       {
-        title: 'Operations', dataIndex: '', key: 'd', render () {
+        title: 'Operations', dataIndex: '', key: 'd', customRender () {
           return <a href='#'>Operations</a>
         },
       },

components/vc-table/demo/scrollY.js

@@ -33,7 +33,7 @@ export default {
         title: <a onClick={this.toggleBody} href='javascript:;'>{this.showBody ? '隐藏' : '显示'}体</a>,
         key: 'x',
         width: 200,
-        render () {
+        customRender () {
           return <a href='#'>Operations</a>
         },
       },

components/vc-table/demo/styled-components.js

@@ -1,20 +1,6 @@
 import Table from '../index'
 import '../assets/index.less'
 
-const columns = [
-  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
-  { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
-  { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
-  {
-    title: 'Operations',
-    dataIndex: '',
-    key: 'd',
-    render (h) {
-      return <a href='#'>Operations</a>
-    },
-  },
-]
-
 const data = [
   { a: '123', key: '1' },
   { a: 'cdd', b: 'edd', key: '2' },
@@ -23,6 +9,19 @@ const data = [
 
 export default {
   render () {
+    const columns = [
+      { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+      { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+      { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
+      {
+        title: 'Operations',
+        dataIndex: '',
+        key: 'd',
+        customRender () {
+          return <a href='#'>Operations</a>
+        },
+      },
+    ]
     const row = {
       render () {
         return <tr style={{ color: 'red' }}>{this.$slots.default}</tr>

components/vc-table/demo/subTable.js

@@ -41,7 +41,7 @@ export default {
       { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
       { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
       {
-        title: 'Operations', dataIndex: '', key: 'x', render: (h, text, record) => {
+        title: 'Operations', dataIndex: '', key: 'x', customRender: (text, record) => {
           return <a href='javascript:;' onClick={e => this.handleClick(record, e)}>click {record.a}</a>
         },
       },

components/vc-table/demo/title-and-footer.js

@@ -2,17 +2,6 @@
 import Table from '../index'
 import '../assets/index.less'
 
-const columns = [
-  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
-  { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
-  { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
-  {
-    title: 'Operations', dataIndex: '', key: 'd', render (h) {
-      return <a href='#'>Operations</a>
-    },
-  },
-]
-
 const data = [
   { a: '123', key: '1' },
   { a: 'cdd', b: 'edd', key: '2' },
@@ -21,6 +10,16 @@ const data = [
 
 export default {
   render () {
+    const columns = [
+      { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+      { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+      { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
+      {
+        title: 'Operations', dataIndex: '', key: 'd', customRender () {
+          return <a href='#'>Operations</a>
+        },
+      },
+    ]
     return (
       <div>
         <h2>title and footer</h2>

components/vc-table/index.js

@@ -34,8 +34,8 @@ const Table = {
         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
+          const customRender = element.data && element.data.scopedSlots && element.data.scopedSlots.default
+          column.customRender = column.customRender || customRender
         }
         columns.push(column)
       })

components/vc-table/src/Column.jsx

@@ -15,7 +15,7 @@ export default {
       'left',
       'right',
     ]),
-    render: PropTypes.func,
+    customRender: PropTypes.func,
     className: PropTypes.string,
     // onCellClick: PropTypes.func,
     // onCell: PropTypes.func,

components/vc-table/src/ExpandableTable.jsx

@@ -122,7 +122,7 @@ const ExpandableTable = {
       rows[0].unshift({ ...iconColumn, column: iconColumn })
     },
 
-    renderExpandedRow (record, index, render, className, ancestorKeys, indent, fixed) {
+    renderExpandedRow (record, index, expandedRowRender, className, ancestorKeys, indent, fixed) {
       const { prefixCls, expandIconAsCell, indentSize } = this
       let colCount
       if (fixed === 'left') {
@@ -138,7 +138,7 @@ const ExpandableTable = {
           props: {
             colSpan: colCount,
           },
-          children: fixed !== 'right' ? render(record, index, indent) : ' ',
+          children: fixed !== 'right' ? expandedRowRender(record, index, indent) : ' ',
         }),
       }]
       if (expandIconAsCell && fixed !== 'right') {

components/vc-table/src/TableCell.jsx

@@ -40,7 +40,7 @@ export default {
       column,
       component: BodyCell,
     } = this
-    const { dataIndex, render, className = '' } = column
+    const { dataIndex, customRender, className = '' } = column
     const cls = className || column.class
     // We should return undefined if no dataIndex is specified, but in order to
     // be compatible with object-path's behavior, we return the record object instead.
@@ -63,8 +63,8 @@ export default {
     let colSpan
     let rowSpan
 
-    if (render) {
-      text = render(h, text, record, index)
+    if (customRender) {
+      text = customRender(text, record, index)
       if (this.isInvalidRenderCellText(text)) {
         tdProps.attrs = text.attrs || text.props || {}
         colSpan = tdProps.attrs.colSpan