DesignPic_20250812155353.tsx 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. import React from 'react'
  2. import { Button, Table, Input } from '@alifd/next';
  3. export default function DesignPic() {
  4. const dataSource = () => {
  5. const result = [];
  6. for (let i = 0; i < 5; i++) {
  7. result.push({
  8. title: { name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible` },
  9. id: 100306660940 + i,
  10. time: 2e3 + i,
  11. });
  12. }
  13. return result;
  14. };
  15. const pic_render = (value: any, index: number, record: any) => {
  16. return (
  17. <img className='size-20' src={record.url} alt={record.title} />
  18. );
  19. }
  20. const name_render = (value: any, index: number, record: any) => {
  21. return <>
  22. <Input placeholder="请输入" />
  23. </>
  24. };
  25. const label_render = (value: any, index: number, record: any) => {
  26. return <>
  27. <Input placeholder="请输入" />
  28. </>
  29. };
  30. const option_render = (value: any, index: number, record: any) => {
  31. return (
  32. <a className='text-red-600'>
  33. 删除
  34. </a>
  35. );
  36. };
  37. return (
  38. <div className='w-3xl h-fit'>
  39. <Button>按钮</Button>
  40. <Table dataSource={dataSource()}>
  41. <Table.Column title="图片" cell={pic_render} />
  42. <Table.Column title="图片名称" cell={name_render} />
  43. <Table.Column title="图片标签" cell={label_render} />
  44. <Table.Column title="操作" cell={option_render} />
  45. </Table>
  46. </div>
  47. )
  48. }