更新日志

使用示例

import SuperTable from "k-table";
//模拟数据
const getData_api = () => {
  let obj = {
    data: [
      {
        instanceName: "名称1",
        zoneCode: "demo-1-b",
        osVersionDetail: "CentOS 7.3",
        publicIpAddress: "45.127.12.142",
        createTime: "2019-09-30 10:52:05"
      },
      {
        instanceName: "名称2",
        zoneCode: "demo-1-a",
        osVersionDetail: "CentOS 7.3",
        publicIpAddress: "45.127.14.125",
        createTime: "2019-09-30 10:52:05"
      }
    ],
    success: true,
    total: 2
  };
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(obj);
    }, 1000);
  });
};
const docColumns = [
  {
    title: "属性",
    dataIndex: "key"
  },
  {
    title: "描述",
    dataIndex: "description"
  },
  {
    title: "类型",
    dataIndex: "type"
  },
  {
    title: "默认值",
    dataIndex: "default"
  }
];
//实例展示开始
const zoneCodeFilters = [
  {
    text: "可用区A",
    value: "demo-1-a"
  },
  {
    text: "可用区B",
    value: "demo-1-b"
  }
];
const columns = [
  {
    title: "名称",
    dataIndex: "instanceName",
    key: "instanceName"
  },
  {
    title: "可用区",
    dataIndex: "zoneCode",
    key: "zoneCode",
    filterMultiple: false, //是否多选
    isAll: true, //是否有 "全部" 选项
    filters: zoneCodeFilters,
    render: item => {
      return renderTypeName(zoneCodeFilters, item);
    }
  },
  {
    title: "实例镜像",
    dataIndex: "osVersionDetail",
    key: "osVersionDetail"
  },
  {
    title: "IP地址",
    dataIndex: "publicIpAddress",
    key: "publicIpAddress"
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
    sorter: (a, b) => a.createTime - b.createTime
  }
];
const cache = false;
const operationList = [
  {
    text: "+ 创建实例",
    type: "BUTTON"
  },
  {
    text: "付费方式",
    type: "SELECT",
    value: "chargeType",
    filters: [
      { text: "预付费", value: "pre" },
      { text: "后付费", value: "post" }
    ],
    width: 120,
    all: true
  },
  {
    text: "月份",
    type: "MONTH",
    value: "month",
    beforeEffectiveMonth: 4,
    afterEffectiveMonth: 1
  },
  {
    text: "时间区域",
    type: "TIME_INTERVAL",
    startValue: "startTime",
    endValue: "endTime",
    mode: ["month", "month"]
  }
];
const menu = [
  {
    text: "名称",
    value: "instanceName",
    placeholder: "名称搜索提示内容",
    regExp: /^名称$/g, //正则
    message: '请输入 "名称" 进行搜索' //提示文字
  },
  {
    text: "IP地址",
    value: "publicIpAddress",
    placeholder: "IP地址搜索提示内容",
    validator: v => {
      if (v === "1234") {
        //校验通过
        return true;
      }
      //返回false为校验不通过
      return false;
    },
    message: '请输入 "1234" 进行搜索'
  },
  {
    text: "付费方式",
    value: "instanceChargeType",
    placeholder: "付费方式",
    maxLength: 80 //最大80字符 默认是50字符
  }
];
function renderTypeName(typeArr = [], value = "") {
  //备注：类型如果是数字的且为0时,!value为false
  if (!typeArr.length || value === "") return "--";
  const currentArr = typeArr.filter(item => {
    return item.value === value;
  });
  if (!currentArr.length) return "--";
  return currentArr[0].text;
}
<div>
  // 表格基本用法，中等大小
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    size="middle"
  />
  // 带搜索框的表格，中文（默认就是中文）
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    searchCondition={menu}
    lang="cn"
  />
  // 带操作按钮的表格1
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={operationList.slice(0, 1)}
  />
  // 带操作按钮的表格2
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={operationList}
  />
  // 带操作按钮和搜索框的表格（控制台风格）
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={operationList}
    searchCondition={menu}
  />
  // 带操作按钮和搜索框的表格（超管风格）
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={operationList.slice(2)}
    searchCondition={menu}
    tableType="small"
  />
  // 指定每页显示条数
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={operationList.slice(2)}
    searchCondition={menu}
    tableType="small"
    pageSizeOptions={[2, 4, 6, 8]}
  />
  // 超管风格传入自定义组件（tableType=small）
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    searchCondition={menu}
    topContent={<div style={{ backgroundColor: "red" }}>顶部内容组件</div>}
    operationTopContent={
      <div style={{ backgroundColor: "green" }}>操作栏上方内容</div>
    }
    operationBottomContent={
      <div style={{ backgroundColor: "yellow" }}>操作栏下方内容</div>
    }
    tableType="small"
  />
  // 控制台风格传入自定义组件（tableType=bigger）
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={operationList}
    searchCondition={menu}
    topContent={<div style={{ backgroundColor: "red" }}>顶部内容组件</div>}
    buttonContent={
      <div style={{ backgroundColor: "gray" }}>按钮操作栏上方内容</div>
    }
    operationTopContent={
      <div style={{ backgroundColor: "green" }}>操作栏上方内容</div>
    }
    operationBottomContent={
      <div style={{ backgroundColor: "yellow" }}>操作栏下方内容</div>
    }
  />
  // 传入children组件
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={operationList}
    searchCondition={menu}
  >
    <div style={{ backgroundColor: "yellow" }}>我是传入的children组件</div>
  </SuperTable>
  // 隐藏分页
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={operationList}
    tableType="small"
    pagination={false}
  />
  // 自定义表格边距
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={operationList}
    tableType="small"
    pagination={false}
    wrapperStyle={{ padding: 0 }}
  />
  // 去除刷新按钮
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    tableType="small"
    operationList={operationList.slice(2)}
    searchCondition={menu}
    isRefresh={false}
  />
  // 隐藏表头
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={operationList}
    tableType="small"
    pagination={false}
    wrapperStyle={{ padding: 0 }}
    showHeader={false}
  />
  // 操作按钮不可用时的提示
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={[
      {
        text: "按钮",
        type: "BUTTON",
        disabled: true,
        title: "当前按钮不可用" //提示内容
      }
    ]}
    tableType="small"
  />
  // 操作栏自定义组件
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={[
      {
        text: "按钮",
        type: "BUTTON",
        disabled: true,
        title: "当前按钮不可用" //提示内容
      },
      {
        text: "月份",
        type: "MONTH"
      },
      {
        text: <div style={{ background: "red" }}>悬浮操作栏的自定义组件</div>,
        type: "TOPTEXT"
      },
      {
        text: <div style={{ background: "gray" }}>按钮栏的自定义组件</div>,
        type: "BOTTOMTEXT"
      }
    ]}
  />
  // 复选框按钮
  <SuperTable
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={[
      {
        text: "按钮",
        type: "BUTTON"
      },
      {
        text: "排除已过期",
        type: "CHECKBOX",
        value: "checked"
      }
    ]}
  />
  // 切换英文状态
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={[
      {
        text: "Month",
        type: "MONTH"
      }
    ]}
    lang="en"
  />
  // 阻止表格调用数据
  <SuperTable
    dataField="data"
    pageField="total"
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={[
      {
        text: "Month",
        type: "MONTH"
      }
    ]}
    stopGetData={true}
  />
  ###操作按钮无标题
  <SuperTable
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={[
      {
        type: "MONTH",
        value: "month"
      },
      {
        type: "BUTTON",
        text: "按钮"
      },
      {
        type: "SELECT",
        value: "select",
        filters: [
          { text: "预付费", value: "pre" },
          { text: "后付费", value: "post" }
        ]
      }
    ]}
  />
  // 改变请求接口时的page与pageSize的参数字段
  <SuperTable
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    pageKey="pgnum"
    pageSizeKey="pgsize"
  />
  // 下拉列表未选择时的提示文字及清除按钮
  <SuperTable
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={[
      {
        type: "SELECT",
        value: "select",
        width: 150,
        allowClear: true,
        placeholder: "请选择付费方式",
        filters: [
          { text: "预付费", value: "pre" },
          { text: "后付费", value: "post" }
        ]
      }
    ]}
  />
  // 时间区域选择支持时分秒
  <SuperTable
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={[
      {
        text: "时间区域",
        type: "TIME_INTERVAL",
        startValue: "startTime",
        endValue: "endTime",
        format: "YYYY-MM-DD HH:mm:ss",
        showTime: true
      }
    ]}
  />
  ###
  自定义数据传入(操作仅支持分页，例如搜索、operationList操作按钮等无效，如有更新或者筛选数据请在外部调用方法updateCustomData更新数据)
  自定义数据外部方法：this.table.updateCustomData(data:[],flag:bool)-更新数据
  <SuperTable
    columns={columns}
    stopGetData={true} //先阻止请求数据
    cache={false} //自定义数据暂时不支持cache开启
    width={1600}
    customData={[
      {
        //传入自定义数据
        instanceName: "自定义传入名称1",
        zoneCode: "demo-1-b",
        osVersionDetail: "CentOS 7.3",
        publicIpAddress: "45.127.12.142",
        createTime: "2019-09-30 10:52:05"
      },
      {
        instanceName: "自定义传入名称2",
        zoneCode: "demo-1-a",
        osVersionDetail: "CentOS 7.3",
        publicIpAddress: "45.127.14.125",
        createTime: "2019-09-30 10:52:05"
      }
    ]}
    searchCondition={menu}
    pageSizeOptions={[1]}
    customDataTableChange={(filters, sorter) => {
      //表格改变筛选及排序时回调 - 外部操作数据后使用this.table.updateCustomData更新数据
      console.log(filters, sorter);
    }}
    onSearch={item => {
      //搜索组件回调 - 在外部进行数据的搜索后再使用this.table.updateCustomData更新数据
      console.log(item);
    }}
  />
  // 请求强制带上分页信息
  请求时的page和pageSize的key可通过pageKey、pageSizeKey改变
  <SuperTable
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    reqMustPageInfo={true} //请求强制带上分页信息
  />
  // 搜索时对输入的数据进行校验
  可传入正则(regExp)或者自定义校验方法(validator)，使用方法查看示例
  <SuperTable
    searchCondition={[
      {
        text: "名称",
        value: "name",
        placeholder: '正则校验,输入"名称"进行搜索',
        regExp: /^名称$/g, //正则
        message: '请输入 "名称" 进行搜索' //提示文字
      },
      {
        text: "可用区",
        value: "region",
        placeholder: '自定义方法校验,输入值必须等于 "可用区A"',
        validator: v => {
          if (v === "可用区A") {
            //校验通过
            return true;
          }
          //返回false为校验不通过
          return false;
        },
        message: '请输入 "可用区A" 进行搜索'
      }
    ]}
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    reqMustPageInfo={true} //请求强制带上分页信息
  />
  // 传入多选筛选按钮
  <SuperTable
    columns={[
      {
        title: "所属用户",
        dataIndex: "userName",
        key: "userClassify",
        filters: [
          { text: "测试用户", value: "TEST_USER" },
          { text: "内部用户", value: "INTERNAL_USER" }
        ],
        filterMultiple: true, //开启多选
        isAll: true, //是否有"全部"选项
        allText: "全部",
        width: 150
      }
    ]}
    getDataApi={getData_api}
    cache={cache}
    reqMustPageInfo={true} //请求强制带上分页信息
  />
  // 自定义输入框输入字符长度
  <SuperTable
    columns={[
      {
        title: "所属用户",
        dataIndex: "userName",
        key: "userClassify",
        filters: [
          { text: "测试用户", value: "TEST_USER" },
          { text: "内部用户", value: "INTERNAL_USER" }
        ],
        filterMultiple: true, //开启多选
        isAll: true, //是否有"全部"选项
        allText: "全部",
        width: 150
      }
    ]}
    searchCondition={[
      {
        text: "实例ID",
        value: "ecsResourceUUID",
        placeholder: "输入实例ID搜索",
        maxLength: 20 //最大长度20 如不传则默认50
      },
      {
        text: "实例名称",
        value: "instanceName",
        placeholder: "输入实例名称搜索"
      }
    ]}
    getDataApi={getData_api}
    cache={cache}
    reqMustPageInfo={true} //请求强制带上分页信息
  />
  // 自定义输入框输入字符长度
  <SuperTable
    columns={[
      {
        title: "所属用户",
        dataIndex: "userName",
        key: "userClassify",
        filters: [
          { text: "测试用户", value: "TEST_USER" },
          { text: "内部用户", value: "INTERNAL_USER" }
        ],
        filterMultiple: true, //开启多选
        isAll: true, //是否有"全部"选项
        allText: "全部",
        width: 150
      }
    ]}
    searchCondition={[
      {
        text: "实例ID",
        value: "ecsResourceUUID",
        placeholder: "输入实例ID搜索",
        maxLength: 20 //最大长度20 如不传则默认50
      },
      {
        text: "实例名称",
        value: "instanceName",
        placeholder: "输入实例名称搜索"
      }
    ]}
    getDataApi={getData_api}
    cache={cache}
    reqMustPageInfo={true} //请求强制带上分页信息
  />
  // 滚动下拉选择
  <SuperTable
    columns={columns}
    getDataApi={getData_api}
    cache={cache}
    width={1600}
    operationList={[
      {
        text: "隐藏零余额用户",
        type: "INFINITE_SELECT",
        placeholder: "请选择隐藏零余额用户",
        disabled: false,
        value: "infititeSelect", //要传递给接口的参数名
        width: 250, //下拉框宽度
        searchKey: "value", //搜索要传递的参数名
        optionFormat: {
          key: "key",
          value: "value"
        },
        pageKey: "pgnum",
        pageSizeKey: "pgsize",
        status: "success",
        dataFormat: "data",
        field: "value", //要传给接口的参数字段，默认为value
        customText: v => {
          return v;
        },
        api: getData_api,
        callback: (v: any) => {
          console.log(v);
        }
      }
    ]}
  />
  // 传入antd Table组件参数
  <SuperTable
    columns={[
      {
        title: "所属用户",
        dataIndex: "userName",
        key: "userClassify",
        filters: [
          { text: "测试用户", value: "TEST_USER" },
          { text: "内部用户", value: "INTERNAL_USER" }
        ],
        filterMultiple: true, //开启多选
        isAll: true, //是否有"全部"选项
        allText: "全部",
        width: 150
      }
    ]}
    getDataApi={getData_api}
    cache={cache}
    reqMustPageInfo={true} //请求强制带上分页信息
    propsAny={{
      onRow: record => {
        return {
          onClick: event => {
            console.log(event);
          }, // 点击行
          onDoubleClick: event => {},
          onContextMenu: event => {},
          onMouseEnter: event => {}, // 鼠标移入行
          onMouseLeave: event => {}
        };
      }
    }}
  />
</div>;