react+antd封装表格组件2.0

1.0版本 仅仅封装组件，不涉及方法

1.0 仅封装组件
此方法把所用方法集体封装，以后就可以无脑开发拉！

• 只需传入路径，组件列表请求、增删改后更新属性均在组件内发生
• 当前页不是第一页且删除后无数据，则自动跳转到上一页
• 查询时防止多次点击，点击一次后加遮罩，数据返回后放开
• 已有查询条件时，再次分页带上查询条件

需要掌握知识点

useImperativeHandle

一个用于暴露自定义ref属性和自定义方法的钩子函数。可以使得父组件可以通过ref访问子组件中定义的方法和属性，从而实现对子组件的精细控制

！！使用useImperativeHandle时必须与forwardRef搭配使用，否则会报错

• 具体使用步骤如下

//在子组件中定义需要暴露给父组件的方法和属性，并将这些方法和属性放在一个对象中
import { useImperativeHandle, forwardRef } from 'react';

const Child = forwardRef((props, ref) => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  // 定义需要暴露给父组件的方法和属性
  useImperativeHandle(ref, () => ({
    increment,
    count,
  }));

  return <div>{count}</div>;
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//在父组件中使用子组件，并给子组件传递一个ref属性，
import { useRef } from 'react';
import Child from './Child';

const Parent = () => {
  // 创建一个ref
  const childRef = useRef();

  // 在父组件中通过ref访问子组件的方法和属性
  const handleClick = () => {
    childRef.current.increment();
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <Child ref={childRef} />
    </div>
  );
};
//父组件中的handleClick方法通过childRef.current访问了Child组件中的increment方法和count属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

组件代码

import { Table, Pagination, Button, Dropdown, Checkbox, message } from 'antd';
import { useDispatch } from 'umi';
import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { PicRightOutlined } from '@ant-design/icons';

import './index.less';

const TableComponent = forwardRef((props, ref) => {
  const dispatch = useDispatch();
  const [open, setOpen] = useState(false); //动态控制列的下拉显隐
  const [items, setItems] = useState([]); //当前的下拉选择状态
  const [loading, setLoading] = useState(true); //当前的加载状态
  const [dataSource, setDataSource] = useState([]); //列表数据

  const [total, setTotal] = useState(0); //分页总数
  const [size, setSize] = useState(10); //分页页数
  const [current, setCurrent] = useState(1); //分页当前页


  // 抛出获取列表方法
  useImperativeHandle(ref, () => ({
    getList,
  }));

  // 表格列表
  const [columns, setColumns] = useState(
    props.columns.map((item) => {
      return {
        ...item,
        align: 'center',
        ellipsis: {
          showTitle: false,
        },
      };
    }),
  );

  //控制列的初始值
  const [starCol, setStarCol] = useState(
    props.columns.map((item) => {
      return {
        ...item,
        check: true,
        align: 'center',
        ellipsis: {
          showTitle: false,
        },
      };
    }),
  );

  useEffect(() => {
    changItem(starCol);
  }, [props]);



  useEffect(() => {
    if (props.columns || props.columns.length > 0) {
      setColumns(
        props.columns.map((item) => {
          return {
            ...item,
            align: 'center',
            ellipsis: {
              showTitle: false,
            },
          };
        }),
      );
      setStarCol(
        props.columns.map((item) => {
          return {
            ...item,
            check: true,
            align: 'center',
            ellipsis: {
              showTitle: false,
            },
          };
        }),
      );
    }
  }, [props.columns]);


  useEffect(() => {
    // 初始请求列表
    if (props.url) {
      getList();
    }
  }, [props.url]);
  
  useEffect(() => {
    // 新增编辑后列表刷新
    if (props.list) {
      const list = props.list?.map((item, index) => {
        return {
          index: serialNumber(current, size, index + 1),
          ...item,
        };
      });
      setDataSource(list);
    }
  }, [props.list]);

  useEffect(() => {
    if (props.search) {
      dispatch({
        type: 'utils/searchLoadingEvent',
        payload: true,
      });
      // 搜索请求列表
      getList(1, size, props.search, true);
    }
  }, [props.search]); //监听列表传入查询条件

  const getList = (pageCurrent, pageSize, values, isClickSearch) => {
    if (!isClickSearch) {
      // 获取列表时 没点击查询按钮 加载列表
      setLoading(true);
    }
    const payload = {
      current: pageCurrent || current,
      size: pageSize || size,
      ...values,
    };
    dispatch({
      type: props.url,
      payload: payload,
      callback: (res) => {
        if (res) {
          setTotal(res.total);
          setSize(res.size);
          setCurrent(res.current);
          const list = res.data?.map((item, index) => {
            return {
              index: serialNumber(res.current, res.size, index + 1),
              ...item,
            };
          });
          setDataSource(list);
          setLoading(false);
          props.listPaginationChange(payload); //更新接口条件
          
          // 处理列表最后一条数据删除时请求上一页数据
          if (res.data?.length == 0 && res.total > 0) {
            getList(res.current - 1, res.size, props.search);
          }
          
          //点击查询按钮 获取到数据后 关闭局部加载
          if (isClickSearch) {
            dispatch({
              type: 'utils/searchLoadingEvent',
              payload: false,
            });
          }
        }
      },
    });
  };

  // 分页查询列表
  const paginationChange = (pageCurrent, pageSize) => {
    getList(pageCurrent, pageSize, props.search || null);
  };

//这个方法可加可不加，是因为前端需要展示序号，而后端不返回，所以就自己计算啦！
  const serialNumber = (pageIndex, pageSize, index) => {
    return (pageIndex - 1) * pageSize + index;
    
  };

  // 控制显示列的操作
  const onClick = ({ key }) => {
    if (key == 'all') {
      const newDrop = starCol;
      newDrop.map((o, index) => {
        o.check = true;
      });
      changItem(starCol);
      setColumns(
        props.columns.map((item) => {
          return {
            ...item,
            check: true,
            align: 'center',
            ellipsis: {
              showTitle: false,
            },
          };
        }),
      );
    } else {
      const newDrop = starCol;
      newDrop.map((o, index) => {
        if (index == key) {
          o.check = !o.check;
        }
      });
      let newColumns = newDrop.filter((o) => o.check);
      if (newColumns.length == 0) {
        message.warning('请至少选择一列');
      } else {
        setStarCol(newDrop);
        changItem(newDrop);
        setColumns(newColumns); //列状态
      }
    }
  };

  // 列的选中状态改变
  const changItem = (data) => {
    let opitems = data.map((item, index) => {
      return {
        key: index,
        label: <Checkbox checked={item.check}>{item.title}</Checkbox>,
      };
    });
    opitems.unshift(
      {
        key: 'all',
        label: <Button>{'全选列'}</Button>,
      },
      {
        type: 'divider',
      },
    );
    setItems(opitems); //当前的下拉状态
  };

  return (
    <div className="table">
      {!props?.selectIf && (
        <Dropdown
          menu={{
            items,
            onClick,
          }}
          overlayClassName="drop"
          trigger={['click']}
          onOpenChange={() => setOpen(!open)}
          open={open}
          arrow
          placement="bottomRight"
        >
          <a onClick={(e) => e.preventDefault()}>
            <Button icon={<PicRightOutlined />} title="显示/隐藏列"></Button>
          </a>
        </Dropdown>
      )}

      <Table
        bordered
        columns={columns}
        rowSelection={props?.rowSelection}
        // dataSource={isShow ? dataSource : null}
        dataSource={dataSource}
        rowKey={(item) => item.id || item.categoryId || item.modelId}
        pagination={false}
        className="insiadeTable"
        scroll={{
          y: 450,
          ...props?.scroll,
        }}
        onRow={props?.onRow}
        rowClassName={props?.rowClassName}
        summary={props?.summary}
        loading={loading}
      />
      <div className="pagination">
        <Pagination
          showQuickJumper
          defaultCurrent={current}
          total={total}
          showTotal={(total) => `共 ${total} 条`}
          size={size}
          current={current}
          onChange={paginationChange}
          pageSizeOptions={[10, 50, 100, 500]}
        />
      </div>
    </div>
  );
});

export default TableComponent;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288

引用

···
  const [search, setSearch] = useState(null); //搜索条件
  const tableComponentRef = useRef(null);
  const list = useSelector((state) =>state.roleManagement.roleManagementList);
  const [search, setSearch] = useState(null);
  const [listChange, setListChange] = useState(list);
  const [listPaginationChange, setListPaginationChange] = useState(null);
···
  useEffect(() => {
    if (list) {
      setListChange(list); //组件内数据响应后此处更新
    }
  }, [list]);
···
  const onFinish = (values) => {
    setSearch(values); //点击搜索后设置值
  };

···
  <Form onFinish={onFinish} form={form} requiredMark={'Hidden'}>
        <Row gutter={16}>
          <Col span={6}>
            <Form.Item
              name="keyword"
              label="关键字"
            >
              <Input allowClear />
            </Form.Item>
          </Col>
          <Col span={4}>
            <Space>
              <Button
                type="primary"
                icon={<SearchOutlined />}
                htmlType="submit"
              >
                搜索
              </Button>
              <Button
                icon={<SyncOutlined />}
                onClick={() => {
                  form.resetFields();
                }}
              >
                重置
              </Button>
            </Space>
          </Col>
        </Row>
      </Form>
  
     <TableComponent
        ref={tableComponentRef} //组件实例
        url="roleManagement/getRoleManagementList"
        search={search} //搜索条件
        list={listChange} //数据源
        listPaginationChange={(e) => {
        //{current:1,size:10,..查询条件} 格式
          setListPaginationChange(e);
        }}
        className="list"
        columns={columns} //列
        scroll={{
          x: 1600,
        }}
      />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

• 新增修改组件

      <Edit
        fillingForm={fillingForm}
        open={isModalOpen}
        setIsModalOpen={setIsModalOpen}
        //修改新增组件只需传入listPaginationChange，便可保留分页及查询条件
        listPaginationChange={listPaginationChange}
      />
     
     //修改新增后调用即可 
    const getRoleList = () => {
     dispatch({
      type: 'roleManagement/getRoleManagementList',
      payload: props.listPaginationChange,
   };
1
2
3
4
5
6
7
8
9
10
11
12
13
14