linkmore-design
Version:
🌈 🚀lm组件库。🚀
110 lines (109 loc) • 2.79 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _ = require("../..");
const createDataSource = start => {
const arr = [];
for (let i = start; i < start + 30000; i += 1) {
const obj = {
key: `key_${i}`,
name: `小黄_${i}`,
id: `id_${i}`,
age: `87`,
address: `杭州_${i}`,
height: i,
favorite2: `篮球_${i}`,
favorite: `足球_${i}`,
sex: i % 3 === 0 ? '男' : '女'
};
arr.push(obj);
}
return arr;
};
const 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
}];
const App = () => {
const [dataSource, setDataSource] = (0, _react.useState)([]);
(0, _react.useEffect)(() => {
setTimeout(() => {
if (dataSource.length >= 500) {
return;
}
const data = createDataSource(dataSource.length);
setDataSource([...dataSource, ...data]);
}, 500);
}, [dataSource]);
const dataChange = newDataSource => {
setDataSource([...newDataSource]);
};
const config = {
pagination: false,
scroll: {
y: 300
},
virtual: true,
hiddenPage: true
};
return /*#__PURE__*/_react.default.createElement(_.Space, {
direction: "vertical",
style: {
width: '100%'
}
}, /*#__PURE__*/_react.default.createElement("div", null, "\u6570\u636E\u603B\u6570\uFF1A ", dataSource.length), /*#__PURE__*/_react.default.createElement(_.LmTable, (0, _extends2.default)({}, 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"
})));
};
var _default = App;
exports.default = _default;