UNPKG

@alicloud/console-components

Version:

Alibaba Cloud React Components

68 lines (67 loc) 2.68 kB
/** * title: "默认多选表格" * description: "" */ import React, { useState } from 'react'; import { Table } from '@alicloud/console-components'; import Actions, { LinkButton } from '@alicloud/console-components-actions'; var getDataSource = function () { var result = []; for (var i = 0; i < 5; i++) { result.push({ id: 100306660940 + i, status: i % 2 === 0 ? '运行中' : '停用', type: '专用网络', title: '可以通过 expandedRowRender 额外渲染行', }); } return result; }; var onChange = function () { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } console.log.apply(console, args); }; var render = function () { return (React.createElement(Actions, null, React.createElement(LinkButton, { onClick: function () { } }, "\u64CD\u4F5C\u9879"), React.createElement(LinkButton, { onClick: function () { } }, "\u64CD\u4F5C\u9879"), React.createElement(LinkButton, { onClick: function () { } }, "\u64CD\u4F5C\u9879"), React.createElement(LinkButton, { onClick: function () { } }, "\u64CD\u4F5C\u9879"))); }; export default (function () { var _a = useState(getDataSource()), dataSource = _a[0], setDataSource = _a[1]; var onFilter = function (filterParams) { var ds = getDataSource(); Object.keys(filterParams).forEach(function (key) { var selectedKeys = filterParams[key].selectedKeys; if (selectedKeys.length) { ds = ds.filter(function (record) { return selectedKeys.some(function (value) { return record[key].indexOf(value) > -1; }); }); } }); setDataSource(ds); }; return (React.createElement(Table, { onFilter: onFilter, dataSource: dataSource, rowSelection: { onChange: onChange, mode: 'multiple', } }, React.createElement(Table.Column, { title: "\u5B9E\u4F8BID/\u540D\u79F0", dataIndex: "id", width: 200 }), React.createElement(Table.Column, { filters: [ { label: '运行中', value: '运行中', }, { label: '停用', value: '停用', }, ], title: "\u72B6\u6001", dataIndex: "status" }), React.createElement(Table.Column, { title: "\u7F51\u7EDC\u7C7B\u578B", dataIndex: "type" }), React.createElement(Table.Column, { title: "\u64CD\u4F5C", cell: render, width: 200 }))); });