docs($table): edit usage

src/views/api/table.ts

@@ -0,0 +1,153 @@
+export const props = [
+  {
+    param: 'col',
+    desc: '表格列的配置描述，具体项见下表',
+    type: 'Array',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'options',
+    desc: '数据数组',
+    type: 'Array',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'showSort',
+    desc: '头部筛选的 UI 显示，点击头部可触发 change 回调钩子',
+    type: 'Boolean',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'border',
+    desc: '是否展示外边框和列边框',
+    type: 'Boolean',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'showHeader',
+    desc: '是否显示表头',
+    type: 'Boolean',
+    require: '否',
+    default: 'true',
+  },
+  {
+    param: 'loading',
+    desc: '加载模式',
+    type: 'Boolean',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'size',
+    desc: '设置按钮大小，可选值为 <code>small</code> 或者不设',
+    type: 'String',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'scroll',
+    desc: '设置横向或纵向滚动，也可用于指定滚动区域的宽和高，可以设置为像素值，百分比，具体项见下表',
+    type: 'Object',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'header',
+    desc: '列头显示文字',
+    type: 'Function',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'footer',
+    desc: '表格尾部',
+    type: 'Function',
+    require: '否',
+    default: '无',
+  },
+];
+
+export const methods = [
+  {
+    name: 'change',
+    desc: '点击表头触发的方法',
+    return: '{当前表头的配置， 当前表头的索引，排序类型，Event对象}({colItem, colIndex, sortType, ev})',
+  },
+];
+
+export const colProps = [
+  {
+    param: 'colSpan',
+    desc: '表头列合并,设置为 0 时，不渲染',
+    type: 'Number',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'dataIndex',
+    desc: '列数据在数据项中对应的 key',
+    type: 'String',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'defaultSortOrder',
+    desc: '默认排序顺序，可选值： <code>ascend<.code> | <code>descend</cpde>',
+    type: 'String',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'fixed',
+    desc: '列是否固定，可选 <code>left</code> >code>right</code>',
+    type: 'String',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'title',
+    desc: '列头显示文字',
+    type: 'String',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'width',
+    desc: '列宽度',
+    type: 'String|Number',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'render',
+    desc: '生成复杂数据的渲染函数，参数分别为 createElement，{当前文案，行col，行数据，行索引，所有数据}((text, col, optItem, optIndex, options))，@return VNode',
+    type: 'Function',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'extendRowRender',
+    desc: '生成<strong>行展开</strong>复杂数据的渲染函数，参数分别为 createElement，{行col，行数据，行索引，所有数据}((col, optItem, optIndex, options))，@return VNode',
+    type: 'Function',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'col',
+    desc: '表身列合并，返回合并的数字， 0 则不显示，不合返回 <code>undefined</code>>',
+    type: 'Function',
+    require: '否',
+    default: '无',
+  },
+  {
+    param: 'row',
+    desc: '表身行合并，返回合并的数字， 0 则不显示，不合返回 <code>undefined</code>>',
+    type: 'Function',
+    require: '否',
+    default: '无',
+  },
+];

src/views/code/table/base.ts

@@ -0,0 +1,25 @@
+import { ApiEntity } from '@/views/entity/demoentity';
+import { baseCol, baseOptions } from '@/views/code/table/options/base';
+
+/**
+ * demo 的代码部分， WDemo 的下面部分
+ * @param attr {String} 额外添加的属性，适用于 loading ， ghost ， disabled 等类型为 boolean 的属性。
+ * @return {string}
+ */
+export const codeCommon = (): string => '<w-table :col="baseCol" :options="baseOptions"></w-table>';
+
+const base: ApiEntity = {
+  title: '基本使用',
+  desc: '最简单的用法。',
+  code: codeCommon(),
+  js: `{
+  data() {
+    return {
+      baseCol: ${JSON.stringify(baseCol)},
+      baseOptions: ${JSON.stringify(baseOptions)},
+    };
+  },
+}`,
+};
+
+export default base;

src/views/code/table/border.ts

@@ -0,0 +1,31 @@
+import { ApiEntity } from '@/views/entity/demoentity';
+import { borderCol, borderOptions } from '@/views/code/table/options/border';
+
+/**
+ * demo 的代码部分， WDemo 的下面部分
+ * @param attr {String} 额外添加的属性，适用于 loading ， ghost ， disabled 等类型为 boolean 的属性。
+ * @return {string}
+ */
+export const codeCommon = (): string => `<w-table
+  :col="borderCol"
+  border
+  :options="borderOptions"
+  :header="(creatElement) => creatElement('div', 'header')"
+  :footer="(creatElement) => creatElement('div', 'footer')"
+></w-table>`;
+
+const border: ApiEntity = {
+  title: '带边框',
+  desc: '添加表格边框线，页头和页脚。',
+  code: codeCommon(),
+  js: `{
+  data() {
+    return {
+      borderCol: ${JSON.stringify(borderCol)},
+      borderOptions: ${JSON.stringify(borderOptions)},
+    };
+  },
+}`,
+};
+
+export default border;

src/views/code/table/checkbox.ts

@@ -0,0 +1,45 @@
+import { ApiEntity } from '@/views/entity/demoentity';
+import { checkboxCol, checkboxOptions } from '@/views/code/table/options/checkbox';
+
+/**
+ * demo 的代码部分， WDemo 的下面部分
+ * @param attr {String} 额外添加的属性，适用于 loading ， ghost ， disabled 等类型为 boolean 的属性。
+ * @return {string}
+ */
+export const codeCommon = (): string => `<w-table :col="checkboxCol" :options="checkboxOptions">
+  <template #header-checkbox="{options, colItem}">
+    <w-checkbox
+      :value="options.filter(optItem => optItem.checked).length === options.length"
+      :indeterminate="options.filter(optItem => !optItem.checked).length < options.length"
+      :change="checkAll.bind(this, options)"
+    />
+  </template>
+  <template #checkbox="{optItem}">
+    <w-checkbox v-model="optItem.checked" />
+  </template>
+</w-table>`;
+
+const base: ApiEntity = {
+  title: '可选择',
+  desc: '第一列是联动的选择框。通过 <a class="link" href="https://cn.vuejs.org/v2/api/#v-slot" target="_blank">v-slot</a> 定义表格任何地方。',
+  code: codeCommon(),
+  js: `{
+  data() {
+    return {
+      checkboxCol: ${JSON.stringify(checkboxCol)},
+      checkboxOptions: ${JSON.stringify(checkboxOptions)},
+    };
+  },
+  methods: {
+    checkAll(options, params) {
+      options.forEach(optItem => {
+        Object.assign(optItem, {
+          checked: !optItem.checked,
+        });
+      });
+    },
+  },
+}`,
+};
+
+export default base;

src/views/code/table/empty.ts

@@ -0,0 +1,25 @@
+import { ApiEntity } from '@/views/entity/demoentity';
+import { emptyCol, emptyOptions } from '@/views/code/table/options/empty';
+
+/**
+ * demo 的代码部分， WDemo 的下面部分
+ * @param attr {String} 额外添加的属性，适用于 loading ， ghost ， disabled 等类型为 boolean 的属性。
+ * @return {string}
+ */
+export const codeCommon = (): string => '<w-table :col="emptyCol" :options="emptyOptions"></w-table>';
+
+const empty: ApiEntity = {
+  title: '基本使用',
+  desc: '最简单的用法。',
+  code: codeCommon(),
+  js: `{
+  data() {
+    return {
+      emptyCol: ${JSON.stringify(emptyCol)},
+      emptyOptions: ${JSON.stringify(emptyOptions)},
+    };
+  },
+}`,
+};
+
+export default empty;

src/views/code/table/extend.ts

@@ -0,0 +1,102 @@
+import { ApiEntity } from '@/views/entity/demoentity';
+import { extendOptions } from '@/views/code/table/options/extend';
+
+/**
+ * demo 的代码部分， WDemo 的下面部分
+ * @param attr {String} 额外添加的属性，适用于 loading ， ghost ， disabled 等类型为 boolean 的属性。
+ * @return {string}
+ */
+export const codeCommon = (): string => '<w-table :col="extendCol" :options="extendOptions"></w-table>';
+
+const extend: ApiEntity = {
+  title: '可展开及嵌套子表格',
+  desc: '当表格内容较多不能一次性完全展示时。展示每行数据更详细的信息。',
+  code: codeCommon(),
+  js: `{
+  data() {
+    const detailCol = [
+      {
+        title: 'Name',
+        dataIndex: 'name',
+        key: 'name',
+      }, {
+        title: 'Age',
+        dataIndex: 'age',
+        key: 'age',
+      },
+    ];
+    const self = this;
+    return {
+      extendStatus: 1,
+      openIndex: 2,
+      extendCol: [{
+        title: 'Name',
+        dataIndex: 'name',
+        key: 'name',
+      }, {
+        title: 'Action',
+        key: 'action',
+        dataIndex: 'action',
+        render(createElement, { optIndex }) {
+          return createElement('div', [
+            createElement('a', {
+              style: {
+                color: optIndex === self.openIndex && self.extendStatus === 1 ? '#1996f9' : '#999',
+                padding: '0 16px 0 0',
+              },
+              on: {
+                click() {
+                  self.openIndex = optIndex;
+                  self.extendStatus = 1;
+                },
+              },
+            }, '详情'),
+            createElement('a', {
+              style: {
+                color: optIndex === self.openIndex && self.extendStatus === 2 ? '#1996f9' : '#999',
+                padding: '0 16px 0 0',
+              },
+              on: {
+                click() {
+                  self.openIndex = optIndex;
+                  self.extendStatus = 2;
+                },
+              },
+            }, '朋友'),
+          ]);
+        },
+        extendRowRender(createElement, { optItem, optIndex }) {
+          const childNode = [];
+
+          if (optIndex === self.openIndex && self.extendStatus === 1) {
+            childNode.push(createElement('w-table', {
+              props: {
+                col: detailCol,
+                options: optItem.extend1,
+              },
+            }));
+          }
+
+          if (optIndex === self.openIndex && self.extendStatus === 2) {
+            childNode.push(createElement('w-table', {
+              props: {
+                col: detailCol,
+                options: optItem.extend2,
+              },
+            }));
+          }
+
+          if (childNode.length) {
+            return createElement('div', childNode);
+          }
+
+          return null;
+        },
+      }],
+      extendOptions: ${JSON.stringify(extendOptions)},
+    };
+  },
+}`,
+};
+
+export default extend;