@cainiaofe/cn-ui-m
Version:
88 lines (87 loc) • 4.86 kB
JavaScript
import React from 'react';
import { CnListPro, CnListProItem, CnDemoBlock, CnDemoPage, CnImageViewer, CnIcon, } from "../../..";
export var 勾选 = function () {
return (React.createElement(CnDemoPage, { title: "\u52FE\u9009" },
React.createElement(CnDemoBlock, { title: "\u591A\u9009" },
React.createElement(CnListPro, { dataSource: [
{
title: '标题1',
description: '描述1',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
key: '1',
},
{
title: '标题2',
description: '描述2',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
key: '2',
},
{
title: '标题3',
description: '描述3',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
key: '3',
},
{
title: '标题4',
description: '描述4',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
key: '4',
},
{
title: '标题5',
description: '描述5',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
key: '5',
},
], renderItem: function (item) {
return (React.createElement(CnListProItem, { title: item.title, description: item.description, avatar: React.createElement(CnImageViewer, { width: 40, height: 40, src: item.avatar }), actions: React.createElement(CnIcon, { type: "arrow-right", size: "medium" }), itemKey: item.key }));
}, rowSelection: {
type: 'multiple',
onChange: function (record, selectedRowKeys, selectedRows) {
console.log(selectedRowKeys, selectedRows, 'selectedRowKeys, selectedRows');
},
} })),
React.createElement(CnDemoBlock, { title: "\u5355\u9009" },
React.createElement(CnListPro, { dataSource: [
{
title: '标题1',
description: '描述1',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
key: '1',
},
{
title: '标题2',
description: '描述2',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
key: '2',
},
{
title: '标题3',
description: '描述3',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
key: '3',
},
{
title: '标题4',
description: '描述4',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
key: '4',
},
{
title: '标题5',
description: '描述5',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
key: '5',
},
], renderItem: function (item) {
return (React.createElement(CnListProItem, { title: item.title, description: item.description, avatar: React.createElement(CnImageViewer, { width: 40, height: 40, src: item.avatar }), actions: React.createElement(CnIcon, { type: "arrow-right", size: "medium" }), itemKey: item.key }));
}, rowSelection: {
type: 'single',
onChange: function (record, selectedRowKeys, selectedRows) {
console.log(selectedRowKeys, selectedRows, 'selectedRowKeys, selectedRows');
},
} }))));
};
export default { title: 'demo/CnListPro' };
勾选.desc = '通过设置rowSelection属性实现';