weaver-e10-builder 1.0.11-beta → 1.0.12-beta

package/skill-docs/references/components/display-List.md

@@ -0,0 +1,320 @@
+## 代码演示
+### 基础用法
+```tsx
+import React from "react";
+import { List, Icon, ListData } from "@weapp/ui";
+
+const style = { height: "300px" };
+const sortableOptions = { handle: ".my-handle" };
+
+const datas: any[] = [];
+for (let i = 0; i < 20; i++) {
+  datas.push({
+    id: i,
+    title: `开发${i + 1}部`,
+  });
+}
+const datas1: any[] = [];
+for (let i = 0; i < 200000; i++) {
+  datas1.push({
+    id: i,
+    title: `开发${i + 1}部`,
+  });
+}
+
+export default class ListDemo extends React.Component {
+  state = {
+    activeRows: [],
+  };
+
+  customRenderItem = (item: ListData) => (
+    <div style={{ height: "40px", lineHeight: "40px" }}>
+      <span style={{ marginLeft: "10px" }}>{item.title}</span>
+    </div>
+  );
+
+    customRenderItem1 = (item: ListData) => <div style={{ height: '40px', lineHeight: '40px' }}>
+    <span style={{ marginLeft: '10px' }}>
+      {item.title}
+    </span>
+  </div>
+
+  customRenderItem3 = (item: ListData) => (
+    <div style={{ height: "40px", lineHeight: "40px" }}>
+      <Icon name="Icon-move" className="my-handle" />
+      <span style={{ marginLeft: "10px" }}>{item.title}</span>
+    </div>
+  );
+
+  onRowClick = (data?: ListData, index?: number) => {
+    this.setState({ activeRows: [data] });
+  };
+
+  onSortEnd = (data: ListData[]) => {};
+
+  render() {
+    return (
+      <div>
+        <h4>基础用法</h4>
+        <List
+          style={style}
+          direction="column"
+          data={datas}
+          customRenderContent={this.customRenderItem}
+          bordered={true}
+          isStopMouseDown={true}
+        />
+        <h4>长按左边图标进行拖拽</h4>
+        <List
+          sortable={true}
+          style={style}
+          direction="column"
+          sortableOptions={sortableOptions}
+          data={datas}
+          customRenderContent={this.customRenderItem3}
+          onSortEnd={this.onSortEnd}
+          onRowClick={this.onRowClick}
+          activeRows={this.state.activeRows}
+        />
+        <h4>虚拟列表</h4>
+        <List
+          direction="column"
+          data={datas1}
+          virtualMode={true}
+          virtualModeProps={{
+            defaultRowHeight: 40,
+            minContainerHeight: 360,
+          }}
+          customRenderContent={this.customRenderItem1}
+        />
+      </div>
+    );
+  }
+}
+```
+### 分页模式
+```tsx
+import React from 'react';
+import { List, ListData, ListGroupData, Radio, ListPaginationType, RadioDataType, RadioValueType } from '@weapp/ui';
+const style2 = { height: '300px' }
+const dataGroupTitle1 = [
+  { id: 'A', content: 'A', draggable: false },
+  { id: 'B', content: 'B', expandable: true },
+  { id: 'C', content: 'C', expandable: true },
+  { id: 'D', content: 'D' }
+];
+const dataGroupTitle = [
+  { id: 'A', content: 'A', checkable: true, draggable: false },
+  { id: 'B', content: 'B', checkable: true, icon: "Icon-integrate-o" },
+  { id: 'C', content: 'C', checkable: true },
+  { id: 'D', content: 'D', checkable: true }
+];
+const datas: any[] = [];
+for (let i = 0; i < 20; i++) {
+  datas.push({
+    id: i,
+    title: `开发${i + 1}部`,
+  });
+}
+const datas2: any[] = [];
+for (let i = 0; i < 20; i++) {
+  datas2.push({
+    id: i + 21,
+    title: `开发${i + 21}部`,
+  });
+}
+const data = datas;
+const options: RadioDataType = [
+  {
+    id: 'scroll',
+    title: '滚动分页',
+    content: '滚动分页',
+  },
+  {
+    id: 'more',
+    title: '点击加载更多',
+    content: '点击加载更多',
+  },
+  {
+    id: 'part',
+    title: 'Pagination分页',
+    content: 'Pagination分页',
+  },
+];
+export default class ListDemo extends React.Component {
+  state = {
+    selected1: [],
+    data: datas,
+    data1: datas,
+    dataGroupTitle: dataGroupTitle,
+    dataGroupTitle1: dataGroupTitle1,
+    loading: false,
+    hasMore: true,
+    currentPage: 1,
+    pageSize: 10,
+    pageValue: 'scroll',
+  }
+  onRowSelect = (arr: Array<ListData> | Array<string>, data?: ListData[]) => {
+    console.log(arr, data)
+    this.setState({ selected1: arr })
+  }
+  customRenderItem5 = (rowData: ListData, rowID: number) => {
+    const obj = rowData;
+    return (
+      <span key={rowID} style={{ marginLeft: '15px' }}>
+        {obj.title}
+      </span>
+    );
+  }
+  onEndReached = () => {
+    if (this.state.data.length > 60) {
+      this.setState({ hasMore: false })
+    } else {
+      this.setState({ loading: true })
+      setTimeout(() => {
+        this.setState({ data: [...this.state.data, ...data], loading: false })
+      }, 200)
+    }
+  }
+  onPageChange = (value: number) => {
+    const { data } = this.state;
+    if (value * 10 > data.length) {
+      this.setState({ loading: true })
+      setTimeout(() => {
+        const newData = data.concat(datas2)
+        this.setState({ data: newData, loading: false })
+        if (newData.length >= 40) {
+          this.setState({ hasMore: false })
+        }
+      }, 20)
+    }
+    this.setState({ currentPage: value });
+  }
+  onScroll = (e: Event) => {
+    console.log(e)
+  }
+  onQuickSearch = (obj: ListGroupData, i: number) => {
+    this.setState({
+      data1: datas,
+      dataGroupTitle: [dataGroupTitle[i]],
+    })
+  }
+  onSortEnd = (data: ListData[], dataGroupTitle?: ListGroupData[]) => {
+    console.log(data);
+  }
+  onPageTypeChange = (value: RadioValueType) => {
+    this.setState({ pageValue: value, data: datas, data1: datas, loading: false, hasMore: true, currentPage: 1 })
+  }
+  render() {
+    const { hasMore, loading } = this.state;
+    return (
+      <div>
+        <h4>分页模式</h4>
+        <Radio data={options} value={this.state.pageValue} onChange={this.onPageTypeChange} />
+        <br />
+        <List
+          data={this.state.data}
+          customRenderContent={this.customRenderItem5}
+          // onEndReached={this.onEndReached}
+          onScroll={this.onScroll}
+          paginationProps={{
+            value: this.state.currentPage,
+            pageSize: 10,
+            paginationType: this.state.pageValue as ListPaginationType,
+            onChange: (value, pageSize) => {
+              this.onPageChange(value)
+            },
+            total: this?.state?.data?.length || 0
+          }}
+          style={["scroll", "more"]?.includes(this.state.pageValue) ? style2 : {}}
+          loading={loading}
+          hasMore={hasMore}
+        />
+      </div>
+    );
+  }
+}
+```
+
+## 参数说明
+### 组件参数说明如下
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| activeRows | 点击选中的行 | Array | 否 | |
+| boxSelection | 是否支持框选 | boolean | 否 | false |
+| checkStyle | check 框样式 | CSSProperties | 否 | |
+| checkTitle | check框鼠标浮动上去的提示文本 | string | 否 | |
+| checkboxPosition | check 框位置 | 'left' \| 'right' | 否 | false |
+| customRender | 自定义渲染 | (_: any, ele: ReactNode) => ReactNode | 否 | |
+| customRenderContent | 自定义 html 模板渲染 Item 的内容布局,用组件内部的 Item 包裹,具有统一的默认样式和属性 | (rowData: ListData\|ListData[], rowIndex: number) => ReactNode | 否 | |
+| customRenderItem | 自定义渲染 Item,不用组件内部的 Item 包裹,不具有统一的默认样式和属性 | (rowData: ListData, rowIndex: number) => ReactNode | 否 | |
+| customRenderOrder | 自定义渲染序号 | (rowIndex: number \| string) => ReactNode | 否 | |
+| customerSortableGroupOptions | 自定义分组的group配置项 | (groupData: object) => string \| object | 否 | false |
+| data | 列表数据 | Array | 是 | |
+| direction | 横向或纵向显示 | 'column' \| 'row' | 否 | 'row' |
+| disabledHTMLDisplay | 是否禁用模板html渲染 | boolean | 否 | false |
+| expandTemplate | 模板扩展,在模板渲染的基础上进行扩展 | (templateCom: ReactNode, data: ListData[]) => ReactNode | 否 | |
+| getCheckedDisabledProps | 是否选择框禁止选中 | (rowData: ListData, rowIndex: number) => boolean | 否 | |
+| getSortableInstance | 获取sortable实例 | (instance: object \| object[]) => void | 否 | |
+| getTemplate | 重写模板的钩子函数 | (template: any) => void | 否 | |
+| hasMore | 是否还有更多数据(为 false 时 onEndReached 不会触发) | boolean | 否 | true |
+| hideEmptyGroup | 是否隐藏空分组 | boolean | 否 | false |
+| horizontalScroll | 横向显示时,超出区域是滚动还是换行,默认换行 | boolean | 否 | true |
+| indexedIdentities | 索引信息 | GroupData[] | 否 | |
+| initialOrder | 初始序号 | number | 否 | |
+| isClickable | 根据每行数据决定是否绑定点击事件 | (data: ListData, index: number, childData?: AnyObj[]) => boolean | 否 | |
+| isStopMouseDown | 是否阻止 mousedown 事件冒泡（常用于搭配 Trigger 组件使用） | boolean | 否 | false |
+| loading | 是否正在加载数据(为 true 时 onEndReached 不会触发) | boolean | 否 | false |
+| multipleCheck | 多选或单选 | boolean | 否 | |
+| noBorder | 是否显示边框 | boolean | 否 | false |
+| onEndReached | 当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足 onEndReachedThreshold 个像素的距离时调用 | () => void | 否 | |
+| onEndReachedThreshold | 调用 onEndReached 之前的临界值，单位是像素 | number | 否 | 10 |
+| onQuickSearch | 快捷导航切换时调用 | (sectionData: GroupData, sectionIndex: number) => void | 否 | |
+| onQuickSearchTop | 快捷导航栏最顶部按钮点击调用 | (quickSearchBarTop?: GroupData) => void | 否 | |
+| onRowClick | 行点击事件 | (data?: ListData, index?: number) => void | 否 | |
+| onRowSelect | 行选中事件 | (selectedRowKeys: Array \| Array, selectedData?: ListData[]) => void | 否 | |
+| onScroll | 滚动事件 | (e: Event) => void | 否 | |
+| onSortEnd | 拖拽结束回调 | (data: ListData[]) => void | 否 | |
+| paginationProps | 分页属性 | PaginationProps | 否 | |
+| popoverProps | 气泡框属性 | PopoverProps | 否 | |
+| pullToRefresh | 拉动刷新 | ReactNode | 否 | |
+| quickSearchBarStyle | quickSearchBar 的 style | CSSProperties | 否 | |
+| quickSearchBarTop | 快捷导航栏最顶部按钮、常用于回到顶部 | GroupData | 否 | |
+| renderFooter | 列表尾部 | (() => ReactNode) \| string \| JSX.Element | 否 | |
+| renderHeader | 列表头部 | (() => ReactNode) \| string \| JSX.Element | 否 | |
+| renderPopup | 渲染气泡框内容 | (data?: ListData, index?: number) => void | 否 | |
+| renderSectionHeader | 如果提供了此函数，会为每个小节(section)渲染一个标题 | (sectionData?: GroupData) => ReactNode | 否 | |
+| rowSelect | 支持配置点击整行选中或是只点击 check 框选中 | boolean | 否 | false |
+| scrollEventThrottle | 控制在滚动过程中，scroll 事件被调用的频率 | number | 否 | |
+| selectedRowKeys | 选中行主键的集合 | Array \| Array | 否 | |
+| showCheck | 显示可选 | boolean | 否 | false |
+| showDataGroupByType | 跨分组拖拽 | boolean | 否 | false |
+| showImg | 是否显示图标 | boolean | 否 | false |
+| showOrder | 是否显示序号 | boolean | 否 | false |
+| showPopover | 显示气泡框 | boolean | 否 | false |
+| sortable | 是否可拖拽排序 | boolean | 否 | false |
+| sortableOptions | 拖拽相关的方法,参考sortablejs 文档 | object | 否 | |
+| stopCheckboxPropagation | 是否阻止check框点击事件的冒泡 | boolean | 否 | false |
+| template | 模板 | any | 否 | |
+| templateType | 模板类型 | string | 否 | |
+| virtualMode | 是否开启虚拟列表模式 | boolean | 否 | false |
+| virtualModeProps | 虚拟列表配置参数 | IVirtualModeProps | 否 | - |
+### paginationProps分页配置 参数说明如下
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| PaginationProps | 分页器配置，详情见 组件 Pagination API 说明 | boolean | | |
+| paginationType | 分页模式 | 'scroll' \| 'part' | | 'scroll' |
+### IndexedList索引列表配置 参数说明如下
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| indexedIdentities | 索引信息 | GroupData[] | 是 | |
+| initialOrder | 初始序号 | number | 否 | |
+### IVirtualModeProps虚拟列表配置 参数说明如下
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| defaultRowHeight | 默认行高 | number | | 40 |
+| getItemSize | 动态计算列表每行高度 | (index?: number) => number | | |
+| measuredRowHeight | 是否开启动态行高 | boolean | | false |
+| minContainerHeight | 列表容器初始化默认最小高度 | number | | 300 |
+## 注意事项
+1、sortableOptions配置，可参考sortablejs文档(https://sortablejs.com/options.html)

package/skill-docs/references/components/display-Pagination.md

@@ -0,0 +1,41 @@
+## 基础用法
+```js
+import React, { ReactNode } from 'react';
+import { Pagination, AnyObj } from '@weapp/ui';
+import './index.less';
+
+export default class CustomStyleDemo extends React.PureComponent<{}> {
+
+  onChange = (value: number, pageSize: number) => {
+    console.log('onChange', value, pageSize);
+  }
+  
+  customRenderContent = (_: any, ele: ReactNode, customRenderMap: AnyObj) => {
+    const { totalContent, pagerContent, sizeChangeContent, jumpContent } = customRenderMap
+    return [
+      totalContent,
+      sizeChangeContent,
+      pagerContent,
+      jumpContent
+    ].filter(i => !!i)
+  }
+
+  render() {
+    return (
+      <Pagination
+        defaultValue={1}
+        total={500} // 总数 会显示 `共500条`
+        simple={false}
+        showTotal={true}
+        showJumper={true}
+        showSizeChanger={true}
+        onChange={this.onChange}
+        onSizeChange={this.onChange}
+        showFirstLastBtnInForce={true}
+        customRenderContent={this.customRenderContent}
+        className={'ui-demo-pagination-new'}
+      />
+    );
+  }
+}
+```

package/skill-docs/references/components/display-Spin.md

@@ -0,0 +1,34 @@
+## 基础用法
+
+```tsx
+import React from 'react';
+import { Spin } from '@weapp/ui';
+
+class SpinDemo extends React.Component {
+  render() {
+    return (
+      <div>
+        <Spin />
+        <Spin size="small" />
+        <Spin size="large" />
+        <Spin color='red'/>
+        <Spin text="加载中。。。">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </Spin>
+      </div>
+    )
+  }
+}
+```
+
+## 参数说明
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| color | 旋转图标颜色 | string | 否 | |
+| customRender | 自定义渲染 | (_: any, ele: ReactNode) => ReactNode | 否 | |
+| size | 尺寸大小 | small、large | 否 | |
+| spinning | 是否显示 | boolean | 否 | false |
+| style | 样式 | CSSProperties | 否 | |
+| text | 加载文字 | string | 否 | |
+| type | 加载模式 | circle、curve | 否 | |
+| wrapperClassName | 最外层包裹样式 | string | 否 | |

package/skill-docs/references/components/display-Steps.md

@@ -0,0 +1,89 @@
+## 基础用法
+
+```tsx
+import { Component } from 'react'
+import { Steps, StepBaseProps, Button } from '@weapp/ui';
+
+const datas1: Array<StepBaseProps> = [
+  { title: 'First', description: 'This is description.' },
+  { title: 'Second', description: 'This is description.', subTitle: 'click me' },
+  { title: 'Last', description: 'This is description.',subTitle:'click me' },
+]
+
+interface MStepsDemoProps {
+  weId?: string
+}
+
+interface MStepsDemoState {
+  current?: number
+}
+
+export default class StepDemo extends Component<MStepsDemoProps, MStepsDemoState> {
+
+  state = {
+    current: 0,
+  }
+
+  onChange = (current: number) => {
+    this.setState({ current });
+  };
+  
+  nextStep = () => {
+    this.setState((state: any) => {
+      return {
+        current: state.current + 1
+      }
+    });
+  };
+
+  render() {
+    const { current } = this.state;
+    return (
+      <div >
+        <div style={{ lineHeight: '30px' }}>基本使用 </div>
+        <Steps direction="horizontal" current={current} onChange={this.onChange} data={datas1} />
+        <Steps
+          current={current}
+          onChange={this.onChange}
+          data={datas1}
+        />
+        <Steps
+          current={current}
+          onChange={this.onChange}
+          direction='vertical'
+          data={datas1}
+        />
+      </div >
+    )
+  }
+
+}
+```
+
+## 参数说明
+### 组件参数说明如下
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| current | 指定当前步骤，从 0 开始记数 | number | 否 | |
+| customRender | 自定义渲染 | (_: Component, ele: ReactNode) => ReactNode | 否 | |
+| customRenderContent | 自定义渲染 | (data:StepBaseProps, index: number) => ReactNode | 否 | |
+| customRenderStep | 自定义渲染 | (data:StepBaseProps, index: number) => ReactNode | 否 | |
+| data | 子组件的数据 | Array | 否 | |
+| direction | 展示方式 horizontal 水平 vertical 垂直 | 'horizontal' \| 'vertical' | 否 | horizontal |
+| labelPlacement | 标签放置位置相对于图标的位置 | 'horizontal' \| 'vertical' | 否 | vertical |
+| labelSpace | 图标和文字的距离 | Number | 否 | 10 |
+| onChange | 切换步骤时的回调 | (current: number) => void | 否 | |
+| style | style 样式 | CSSProperties | 否 | |
+| textAlign | 水平方向步骤条的·文字对齐方式 | 'left' \| 'center' | 否 | center |
+
+### Steps.data 参数说明如下
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| description | 步骤的详情描述，可选 | ReactNode | 否 | |
+| disabled | 禁用点击 | boolean | 否 | false |
+| icon | 步骤图标的类型，可选 | string ReactElement | 否 | |
+| iconColor | 图标被选中时候的颜色 | string | 否 | |
+| iconStyle | 图标的背景颜色，文字颜色，边框颜色等 | CSSProperties | 否 | |
+| status | 指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态。可选：wait process finish error | string | 否 | wait |
+| subTitle | 子标题 | ReactNode | 否 | |
+| title | 标题 | ReactNode | 否 | |

package/skill-docs/references/components/display-Table.md

@@ -0,0 +1,160 @@
+## 表格组件的使用案例
+```js
+import React from 'react';
+import { Table, Avatar, Dialog, ITableColumn, Switch } from '@weapp/ui';
+import imgSrc from "../../../../assets/images/ODTLcjxAfvqbxHnVXCYX.png"
+const { message } = Dialog;
+
+const columns: ITableColumn[] = [
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    isPrimaryKey: true,
+    bodyRender: getName,
+  }, {
+    title: '联系方式',
+    dataIndex: 'tel'
+  }, {
+    title: '部门',
+    dataIndex: 'depart',
+  },{
+    title: '多行文本',
+    dataIndex: 'textarea',
+  },{
+    title: '上级',
+    dataIndex: 'leader',
+    bodyRender: getLeader
+  },{
+    title: '入职时间',
+    dataIndex: 'join_time',
+  }
+];
+
+function getName(data: any, pos: any, name: any) {
+  const url = imgSrc;
+  return (
+    <span className={'ui-table-demo-name'}>
+      <Avatar size='small' url={url} ></Avatar>
+      <a style={{ marginLeft: '10px', color: '#5D9CEC' }}>{data[name]}</a>
+    </span>
+  )
+}
+
+function getLeader(data: any, pos: any, name: any) {
+  return <a>{data[name]}</a>
+}
+
+const data = [{
+  name: '张天逸',
+  tel: '15199398787',
+  depart: '泛微-北方大区',
+  textarea: '设计师',
+  leader: '王紫博',
+  join_time: '2021-06-23'
+}];
+
+export default class BasicDemo extends React.Component<{}, any> {
+  state = {
+    current: 1,
+    pageSize: 5,
+    data: data,
+    isShowHead: true,
+    loading: false,
+    isShowIndex: true,
+    bordered: false
+  };
+
+  onRowClick = (data: any, index: any, event: any) => {
+    console.log('onRowClick', data, index, event.target)
+  }
+
+  onRowMouseEnter = (a: number, b: object) => {
+    console.log('onRowMouseEnter', a, b)
+  }
+
+  handleChange = (v: boolean) => {
+    this.setState({
+      isShowHead: v
+    })
+  }
+
+  handleLoadingChange = (v: boolean) => {
+    this.setState({
+      loading: v
+    })
+  }
+
+  handleIndexChange = (v: boolean) => {
+    this.setState({
+      isShowIndex: v
+    })
+  }
+
+  onChange = (value: number, pageSize: number) => {
+    this.setState({ current: value, pageSize });
+    message({
+      type: 'success', // type: 'info', 'error', 'success'
+      content: `value: ${value}, pageSize: ${pageSize}`,
+    });
+  }
+
+  onSizeChange = (value: number, pageSize: number) => {
+    this.setState({ current: value, pageSize })
+    message({
+      type: 'success', // type: 'info', 'error', 'success'
+      content: `value: ${value}, pageSize: ${pageSize}`,
+    });
+  }
+
+  getPageInfo = () => {
+    const { current, pageSize, data } = this.state
+
+    return {
+      value: current,
+      pageSize: pageSize,
+      total: data.length,
+      showSizeChanger: true,
+      showTotal: false,
+      showJumper: false,
+      pageSizeOptions: [5, 10],
+      onChange: this.onChange,
+      onSizeChange: this.onSizeChange
+    }
+  }
+
+  handleBorderedChange = (v: boolean) => {
+    this.setState({ bordered: v })
+  }
+
+  render() {
+    const { data, isShowHead, loading, isShowIndex, bordered } = this.state
+    return (
+      <div>
+        <span style={{ margin: '15px 10px', display: 'inline-block', alignItems: 'center' }}>
+          <Switch value={isShowHead} onChange={this.handleChange} />是否显示表头
+        </span>
+        <span>
+          <Switch value={loading} onChange={this.handleLoadingChange} />是否loading
+        </span>
+        <span style={{ margin: '15px 10px', display: 'inline-block', alignItems: 'center' }}>
+          <Switch value={isShowIndex} onChange={this.handleIndexChange} />是否显示序号
+        </span>
+        <span style={{ margin: '15px 10px', display: 'inline-block', alignItems: 'center' }}>
+          <Switch value={bordered} onChange={this.handleBorderedChange} />是否显示边框
+        </span>
+        <Table
+         
+          columns={columns}
+          data={data}
+          pageInfo={this.getPageInfo()}
+          onRowClick={this.onRowClick}
+          isShowHead={isShowHead}
+          loading={loading}
+          isShowIndex={isShowIndex}
+          bordered={bordered}
+        />
+      </div>
+    )
+  }
+}
+```