linkmore-design
Version:
🌈 🚀lm组件库。🚀
106 lines • 2.79 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useEffect } from 'react';
import { LmTable, Space } from "../..";
var createDataSource = function createDataSource(start) {
var arr = [];
for (var i = start; i < start + 30000; i += 1) {
var obj = {
key: "key_".concat(i),
name: "\u5C0F\u9EC4_".concat(i),
id: "id_".concat(i),
age: "87",
address: "\u676D\u5DDE_".concat(i),
height: i,
favorite2: "\u7BEE\u7403_".concat(i),
favorite: "\u8DB3\u7403_".concat(i),
sex: i % 3 === 0 ? '男' : '女'
};
arr.push(obj);
}
return arr;
};
var columns = [{
title: '姓名',
dataIndex: 'name',
key: 'name',
width: 100
}, {
title: '爱好',
dataIndex: 'favorite',
key: 'favorite',
width: 100
}, {
title: '爱好2',
dataIndex: 'favorite2',
key: 'favorite2',
width: 100
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
etype: 'number',
width: 100
}, {
title: '薪水',
dataIndex: 'height',
key: 'height',
etype: 'number',
width: 100,
expression: 'sum'
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
width: 100
}];
var App = function App() {
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
dataSource = _useState2[0],
setDataSource = _useState2[1];
useEffect(function () {
setTimeout(function () {
if (dataSource.length >= 500) {
return;
}
var data = createDataSource(dataSource.length);
setDataSource([].concat(_toConsumableArray(dataSource), _toConsumableArray(data)));
}, 500);
}, [dataSource]);
var dataChange = function dataChange(newDataSource) {
setDataSource(_toConsumableArray(newDataSource));
};
var config = {
pagination: false,
scroll: {
y: 300
},
virtual: true,
hiddenPage: true
};
return /*#__PURE__*/React.createElement(Space, {
direction: "vertical",
style: {
width: '100%'
}
}, /*#__PURE__*/React.createElement("div", null, "\u6570\u636E\u603B\u6570\uFF1A ", dataSource.length), /*#__PURE__*/React.createElement(LmTable, _extends({}, config, {
dataSource: dataSource,
columns: columns
// 表格行 key 的取值，可以是字符串或一个函数
,
rowKey: "key",
size: "small",
dataChange: dataChange,
resizeable: true // 表头列宽度是否可拖动
,
openRowGroup: true // 开启行分组
,
rowGroupTitle: "\u884C\u5206\u7EC4\u6807\u9898",
openColGroup: true // 开启列分组
,
colGroupTitle: "\u5217\u5206\u7EC4\u6807\u9898"
})));
};
export default App;