问题总结21-05-29至21-06-13

⭐import按条件导入

使用import()函数配合if

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

 

⭐react + webpack4搭建管理系统项目

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

⭐useHistory做页面导航

import { useHistory } from "react-router-dom";
function HomeButton() {
  const history = useHistory();
  function handleClick() {
    history.push("/home");
  }
  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

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

⭐antd vue table本地排序

const columns = [
            {
                title: '汉字',
                dataIndex: 'name',
                sorter:(a,b) => a.name.localeCompare(b.name)
            },
            {
                title: '数字',
                dataIndex: 'amount',
                sorter: (a, b) => Number(a.amount) - Number(b.amount),
            },
            {
                title: '字符串',
                dataIndex: 'value',
                sorter: (a, b) => a.value.localeCompare(b.value)
            }，
            {
                title: '字符串',
                dataIndex: 'pbom',
                sorter: (a, b) => {
                    for (let i = 0; i < a.pbom.length; i++) {
                        if (b.pbom[i] !== undefined) {
                            if (a.pbom.charCodeAt(i) > b.pbom.charCodeAt(i)) {
                                return 1;
                            } else {
                                return -1;
                            }
                        } else {
                            return -1;
                        }
                    }
                }
            }
];

⭐antd table自定义分页数据条数

<Table
    rowSelection={{
        type: selectionType,
        ...rowSelection,
    }}
    columns={columns}
    dataSource={datas}
    rowKey={record => record.id}
    pagination={{ pageSize: 5 }}//自定义每页显示的数据条数
/>

⭐excel没有双面打印选项可以考虑驱动重装

⭐antd table表格中添加事件

import React from "react";
import { Table } from "antd";

class TableEx extends React.Component {
  constructor(props) {
    super(props);
    this.state = { expandedRowKeys: [] };
  }

  expandRowByKey = (key) => {
    const { expandedRowKeys } = this.state;
    // const index = expandedRowKeys.findIndex((item) => key === item);
    // if (index > -1) expandedRowKeys.splice(index, 1);
    // else expandedRowKeys.push(key);
    // this.setState({ expandedRowKeys }); //注释部分是网上写法，运行并没有效果
    let keys = [...expandedRowKeys]; // 最后发现这的问题，坑了我半天时间
    if (index > -1) keys = keys.filter((item) => key !== item);
    else keys.push(key);
    this.setState({ expandedRowKeys: keys });
  };
  onExpand = (expanded, record) => {
    this.expandRowByKey(record.key);
  };

  render() {
    const { expandedRowKeys } = this.state;
    const columns = [
      { title: "Name", dataIndex: "name", key: "name" },
      { title: "Age", dataIndex: "age", key: "age" },
      { title: "Address", dataIndex: "address", key: "address" },
      {
        title: "Action",
        dataIndex: "",
        key: "x",
        render: () => <a>Expand</a>,
        onCell: (record) => {
          return {
            onClick: () => this.expandRowByKey(record.key),
          };
        },
      },
    ];
    const data = [
      {
        key: 1,
        name: "John Brown",
        age: 32,
        address: "New York No. 1 Lake Park",
        description:
          "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.",
      },
      {
        key: 2,
        name: "Jim Green",
        age: 42,
        address: "London No. 1 Lake Park",
        description:
          "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.",
      },
      {
        key: 3,
        name: "Not Expandable",
        age: 29,
        address: "Jiangsu No. 1 Lake Park",
        description: "This not expandable",
      },
      {
        key: 4,
        name: "Joe Black",
        age: 32,
        address: "Sidney No. 1 Lake Park",
        description:
          "My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.",
      },
    ];
    console.log(expandedRowKeys);
    return (
      <Table
        columns={columns}
        expandable={{
          expandedRowKeys: expandedRowKeys,
          onExpand: this.onExpand,
          expandedRowRender: (record) => (
            <p style={{ margin: 0 }}>{record.description}</p>
          ),
        }}
        dataSource={data}
      />
    );
  }
}

⭐antd table自定义单元格样式

import styles from './xxx.less';
columns = [
    {
        title: '..',
        ....
         onCell(record, rowIndex) {;
            return {
                className: styles[`.....`],
            };
        },

    },
    ....
    ]
    
    <Table
    columns={this.columns}
    ....
    />

⭐对象数组按其中一个属性排序

var str=[
    {name:"a",age:50},
    {name:"b",age:20},
    {name:"c",age:40},
    {name:"d",age:30},
];
function compare(key){
    return function(value1,value2){
        var val1=value1[key];
        var val2=value2[key];
        return val1-val2;
    }
}
str.sort(compare('age'));
console.log(str);