docs: add resize table demo

Author: tangjinzhou

components/table/demo/index.vue

@@ -20,6 +20,8 @@ import RowSelectionCustom from './row-selection-custom.md';
 import RowSelection from './row-selection.md';
 import Size from './size.md';
 import Template from './template.md';
+import ResizableColumn from './resizable-column';
+import ResizableColumnString from '!raw-loader!./resizable-column';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 
@@ -83,6 +85,9 @@ export default {
         <RowSelection />
         <Size />
         <Template />
+        <demo-container code={ResizableColumnString}>
+          <ResizableColumn />
+        </demo-container>
         <api>
           <template slot="cn">
             <CN />

components/table/demo/resizable-column.vue

@@ -0,0 +1,142 @@
+<cn>
+#### 可伸缩列
+集成 [vue-draggable-resizable](https://github.com/mauricius/vue-draggable-resizable) 来实现可伸缩列。
+</cn>
+
+<us>
+#### Resizable column
+Implement resizable column by integrate with [vue-draggable-resizable](https://github.com/mauricius/vue-draggable-resizable).
+</us>
+
+<template>
+  <a-table bordered :columns="columns" :components="components" :dataSource="data">
+    <template v-slot:action>
+      <a href="javascript:;">Delete</a>
+    </template>
+  </a-table>
+</template>
+
+<script>
+import Vue from 'vue';
+import VueDraggableResizable from 'vue-draggable-resizable';
+
+Vue.component('vue-draggable-resizable', VueDraggableResizable);
+const columns = [
+  {
+    title: 'Date',
+    dataIndex: 'date',
+    width: 200,
+  },
+  {
+    title: 'Amount',
+    dataIndex: 'amount',
+    width: 100,
+  },
+  {
+    title: 'Type',
+    dataIndex: 'type',
+    width: 100,
+  },
+  {
+    title: 'Note',
+    dataIndex: 'note',
+    width: 100,
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    scopedSlots: { customRender: 'action' },
+  },
+];
+const data = [
+  {
+    key: 0,
+    date: '2018-02-11',
+    amount: 120,
+    type: 'income',
+    note: 'transfer',
+  },
+  {
+    key: 1,
+    date: '2018-03-11',
+    amount: 243,
+    type: 'income',
+    note: 'transfer',
+  },
+  {
+    key: 2,
+    date: '2018-04-11',
+    amount: 98,
+    type: 'income',
+    note: 'transfer',
+  },
+];
+const draggingMap = {};
+columns.forEach(col => {
+  draggingMap[col.key] = col.width;
+});
+const draggingState = Vue.observable(draggingMap);
+const ResizeableTitle = (h, props, children) => {
+  let thDom = null;
+  const { key, ...restProps } = props;
+  const col = columns.find(col => {
+    const k = col.dataIndex || col.key;
+    return k === key;
+  });
+  if (!col.width) {
+    return <th {...restProps}>{children}</th>;
+  }
+  const onDrag = (x, y) => {
+    draggingState[key] = 0;
+    col.width = Math.max(x, 1);
+  };
+
+  const onDragstop = () => {
+    draggingState[key] = thDom.getBoundingClientRect().width;
+  };
+  return (
+    <th {...restProps} v-ant-ref={r => (thDom = r)} width={col.width} class="resize-table-th">
+      {children}
+      <vue-draggable-resizable
+        key={col.key}
+        class="table-draggable-handle"
+        w={10}
+        x={draggingState[key] || col.width}
+        z={1}
+        axis="x"
+        draggable={true}
+        resizable={false}
+        onDragging={onDrag}
+        onDragstop={onDragstop}
+      ></vue-draggable-resizable>
+    </th>
+  );
+};
+export default {
+  name: 'App',
+  data() {
+    this.components = {
+      header: {
+        cell: ResizeableTitle,
+      },
+    };
+    return {
+      data,
+      columns,
+    };
+  },
+};
+</script>
+<style lang="less">
+.resize-table-th {
+  position: relative;
+  .table-draggable-handle {
+    height: 100% !important;
+    bottom: 0;
+    left: auto !important;
+    right: -5px;
+    cursor: col-resize;
+    touch-action: none;
+  }
+}
+</style>

package.json

@@ -126,7 +126,7 @@
         "lint-staged": "^9.0.0",
         "markdown-it": "^10.0.0",
         "markdown-it-anchor": "^5.0.0",
-        "marked": "^0.8.0",
+        "marked": "0.3.7",
         "merge2": "^1.2.1",
         "mini-css-extract-plugin": "^0.9.0",
         "minimist": "^1.2.0",
@@ -155,6 +155,7 @@
         "vue": "^2.6.11",
         "vue-antd-md-loader": "^1.1.0",
         "vue-clipboard2": "0.3.1",
+        "vue-draggable-resizable": "^2.1.0",
         "vue-eslint-parser": "^7.0.0",
         "vue-i18n": "^8.3.2",
         "vue-infinite-scroll": "^2.0.2",

site/dev.js

@@ -12,7 +12,7 @@ import Api from './components/api';
 import './components';
 import demoBox from './components/demoBox';
 import demoContainer from './components/demoContainer';
-import Test from '../components/tree/demo/index.vue';
+import Test from '../components/table/demo/index.vue';
 import zhCN from './theme/zh-CN';
 import enUS from './theme/en-US';
 Vue.use(Vuex);