2.1.0 • Published 3 years ago
@neteast/k-table v2.1.0
更新日志
使用示例
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>;