⭐import按條件匯入

使用import()函式配合if

https://blog.csdn.net/weixin_39457424/article/details/111941751

⭐react + webpack4搭建管理系統專案

https://www.jianshu.com/p/04e436cf75ba

⭐useHistory做頁面導航

 1 import { useHistory } from "react-router-dom";
 2 function HomeButton() {
 3   const history = useHistory();
 4   function handleClick() {
 
 5     history.push("/home");
 6   }
 7   return (
 8     <button type="button" onClick={handleClick}>
 9       Go home
10     </button>
11   );
12 }

https://blog.csdn.net/hsany330/article/details/106196896

⭐antd vue table本地排序

 1 const columns = [
 2             {
 3                 title: '漢字',
 
 4                 dataIndex: 'name',
 5                 sorter:(a,b) => a.name.localeCompare(b.name)
 6             },
 7             {
 8                 title: '數字',
 9                 dataIndex: 'amount',
10                 sorter: (a, b) => Number(a.amount) - Number(b.amount),
11             },
 
12             {
13                 title: '字串',
14                 dataIndex: 'value',
15                 sorter: (a, b) => a.value.localeCompare(b.value)
16             }，
17             {
18                 title: '字串',
19                 dataIndex: 'pbom',
20                 sorter: (a, b) => {
21                     for (let i = 0; i < a.pbom.length; i++) {
22                         if (b.pbom[i] !== undefined) {
23                             if (a.pbom.charCodeAt(i) > b.pbom.charCodeAt(i)) {
24                                 return 1;
25                             } else {
26                                 return -1;
27                             }
28                         } else {
29                             return -1;
30                         }
31                     }
32                 }
33             }
34 ];

⭐antd table自定義分頁資料條數

 1 <Table
 2     rowSelection={{
 3         type: selectionType,
 4         ...rowSelection,
 5     }}
 6     columns={columns}
 7     dataSource={datas}
 8     rowKey={record => record.id}
 9     pagination={{ pageSize: 5 }}//自定義每頁顯示的資料條數
10 />

⭐excel沒有雙面列印選項可以考慮驅動重灌

⭐antd table表格中新增事件

 1 import React from "react";
 2 import { Table } from "antd";
 3 
 4 class TableEx extends React.Component {
 5   constructor(props) {
 6     super(props);
 7     this.state = { expandedRowKeys: [] };
 8   }
 9 
10   expandRowByKey = (key) => {
11     const { expandedRowKeys } = this.state;
12     // const index = expandedRowKeys.findIndex((item) => key === item);
13     // if (index > -1) expandedRowKeys.splice(index, 1);
14     // else expandedRowKeys.push(key);
15     // this.setState({ expandedRowKeys }); //註釋部分是網上寫法，執行並沒有效果
16     let keys = [...expandedRowKeys]; // 最後發現這的問題，坑了我半天時間
17     if (index > -1) keys = keys.filter((item) => key !== item);
18     else keys.push(key);
19     this.setState({ expandedRowKeys: keys });
20   };
21   onExpand = (expanded, record) => {
22     this.expandRowByKey(record.key);
23   };
24 
25   render() {
26     const { expandedRowKeys } = this.state;
27     const columns = [
28       { title: "Name", dataIndex: "name", key: "name" },
29       { title: "Age", dataIndex: "age", key: "age" },
30       { title: "Address", dataIndex: "address", key: "address" },
31       {
32         title: "Action",
33         dataIndex: "",
34         key: "x",
35         render: () => <a>Expand</a>,
36         onCell: (record) => {
37           return {
38             onClick: () => this.expandRowByKey(record.key),
39           };
40         },
41       },
42     ];
43     const data = [
44       {
45         key: 1,
46         name: "John Brown",
47         age: 32,
48         address: "New York No. 1 Lake Park",
49         description:
50           "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.",
51       },
52       {
53         key: 2,
54         name: "Jim Green",
55         age: 42,
56         address: "London No. 1 Lake Park",
57         description:
58           "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.",
59       },
60       {
61         key: 3,
62         name: "Not Expandable",
63         age: 29,
64         address: "Jiangsu No. 1 Lake Park",
65         description: "This not expandable",
66       },
67       {
68         key: 4,
69         name: "Joe Black",
70         age: 32,
71         address: "Sidney No. 1 Lake Park",
72         description:
73           "My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.",
74       },
75     ];
76     console.log(expandedRowKeys);
77     return (
78       <Table
79         columns={columns}
80         expandable={{
81           expandedRowKeys: expandedRowKeys,
82           onExpand: this.onExpand,
83           expandedRowRender: (record) => (
84             <p style={{ margin: 0 }}>{record.description}</p>
85           ),
86         }}
87         dataSource={data}
88       />
89     );
90   }
91 }

⭐antd table自定義單元格樣式

 1 import styles from './xxx.less';
 2 columns = [
 3     {
 4         title: '..',
 5         ....
 6          onCell(record, rowIndex) {;
 7             return {
 8                 className: styles[`.....`],
 9             };
10         },
11 
12     },
13     ....
14     ]
15     
16     <Table
17     columns={this.columns}
18     ....
19     />

⭐物件陣列按其中一個屬性排序

 1 var str=[
 2     {name:"a",age:50},
 3     {name:"b",age:20},
 4     {name:"c",age:40},
 5     {name:"d",age:30},
 6 ];
 7 function compare(key){
 8     return function(value1,value2){
 9         var val1=value1[key];
10         var val2=value2[key];
11         return val1-val2;
12     }
13 }
14 str.sort(compare('age'));
15 console.log(str);