add vc-table demo

2018-03-27 19:43:22 +08:00 · 2018-03-27 19:43:22 +08:00 · b4526f8d1a
parent 6d5f04233d
commit b4526f8d1a
8 changed files with 286 additions and 10 deletions
--- a/components/vc-table/demo/fixedColumns.js
+++ b/components/vc-table/demo/fixedColumns.js
@ -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>
+    )
+  },
+}
--- a/components/vc-table/demo/fixedColumnsAndHeader.js
+++ b/components/vc-table/demo/fixedColumnsAndHeader.js
@ -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>
+    )
+  },
+}
--- a/components/vc-table/demo/fixedColumnsAndHeaderSyncRowHeight.js
+++ b/components/vc-table/demo/fixedColumnsAndHeaderSyncRowHeight.js
@ -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>
+    )
+  },
+}
--- a/components/vc-table/demo/grouping-columns.js
+++ b/components/vc-table/demo/grouping-columns.js
@ -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>
+    )
+  },
+}
--- a/components/vc-table/demo/key.js
+++ b/components/vc-table/demo/key.js
@ -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} />
+    )
+  },
+}
+
--- a/components/vc-table/src/BaseTable.jsx
+++ b/components/vc-table/src/BaseTable.jsx
@ -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
      }
    }

--- a/components/vc-table/src/BodyTable.jsx
+++ b/components/vc-table/src/BodyTable.jsx
@ -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
--- a/components/vc-table/src/Table.jsx
+++ b/components/vc-table/src/Table.jsx
@ -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