來源 | juejin.im/user/870468939940184??

作者 | 前端小月月

背景

最近的你有沒有接手的新項目，對這個有什么感覺？我最近接手了一個項目，先不論是否代碼行數的多少，僅是思路就很混亂，像是一件衣服在打補丁，而衣服上還有混亂的線網，數據繞來繞去，和斷掉的線頭，舉例說明下

關于補丁

• 沒有對數據進行擴展處理，一個值一個變量。例如：獲取數據詳情返回的多個對象，便依次存儲多個對象，這樣在參數變更時，便要不停地補充參數，如果你使用的是react，就會發現大量的state還沒有注釋它是用來干什么的，不管對于維護者，還是初入者都是不友好的，其實我們可以存儲在一個變量里，在使用時直接調用對象的參數
• 列表的列表項[1，2，3，4，5]的展示，可能會根據權限展示不同的列表，剛開始是1，2，3，根據==1，==2，==3，后來變成1，2，3，4，就。。。。
• 其實我們根據業務場景是否可以傳入一個數組arr=[1,2,3,4],根據includes判斷是否在數組內(此處會在列表展示區做詳細解釋)

關于線網

• 把父級組件的靜態數據number=3，和回調方法傳給子類，回調方法里使用的卻是，子類傳回來的父類的靜態數據number

關于斷掉的線頭

• 例如使用antd的Tabs:如果只是單純的點擊切換模塊，沒有進行模塊的特殊處理，則不需要onChange的方法，和狀態存儲 ，確定我們想要的，避免無效代碼

關于以上的問題，我基于以往的項目，整理了一下管理系統的組件結構思路，希望可以在你的項目開發中提供一些幫助

#概述

公共結構

關于一個管理系統，使用最多的便是增刪改查，主要的邏輯是對數據的操作，基于以往的項目可以提取以下部分的公共結構

數據流向

• 搜索排序分頁通過操作的參數獲取，列表的展示數據
• 列表操作區會根據刪除或者修改后，重新獲取列表數據

零 · 項目準備

• 此次針對 搜索 列表 分頁 區域
• 使用react作范例，版本號如下

壹 · 存儲搜索參數數據+列表展示區

搜索和分頁數據需要統一存儲

頂端組件代碼和效果展示

搜索組件SearchForm.js

import React from "react";
import { Form, Input, Button } from "antd";

const SearchDemo = (props) => {
const [form] = Form.useForm();

const onFinish = (values) => {
console.log(values);
props.getListBySearch(values);
};
return (
<Formlayout="inline"form={form}name="control-hooks"style={{ width: 400 }}onFinish={onFinish}
><Form.Item name="nameKey" label="姓名"><Input placeholder="請輸入姓名關鍵字" />Form.Item><div><Button type="primary" htmlType="submit">
SubmitButton>div>Form>
);
};
export default SearchDemo;復制代碼

列表及分頁組件

import React from "react";
import { Button, Table } from "antd";
import EditContent from "./EditContent";
export default function TableList(props) {
const { list = [], total, getListByPage, pageConfig } = props;
const columns = [
{
title: "姓名",
dataIndex: "name",
key: "name"
},
{
title: "年齡",
dataIndex: "age",
key: "age"
},
{
title: "住址",
dataIndex: "address",
key: "address"
},
];

function changPage(page, pageSize) {
getListByPage({ current: page, pageSize });
}
return (
<Tablestyle={{ marginTop: 20 }}size="small"dataSource={list}columns={columns}pagination={{...pageConfig,total: total,onChange: changPage
}}
/>
);
}復制代碼

貳·列表操作區+列表展示區

?

列表操作可能同時存在多個彈窗，需對彈窗組件做統一參數處理，利用數據柯里化把父級參數運輸到子組件內

?

數據統一管理

業務邏輯層指index.js組件：負責整個頁面的結構和邏輯處理

效果展示

數據存儲統一管理

• 彈窗數據統一管理

const [modalProps, setModalProps] = useState(dataSource.length);
復制代碼

• 使用柯里化父級傳遞參數統一管理

footer={null}
{...modalProps}
maskClosable={false}
onCancel={() => setModalProps({ visible: false })} >
{modalProps.content && modalProps.content(commonProps)} {/* 使用柯里化對數據傳遞進行處理*/}
</Modal>復制代碼

列表組件新增操作項

{
title: "操作",
dataIndex: "operation",
key: "operation",
render: (text, record) => {
return (
<ButtononClick={() =>
setModalProps({
visible: true,
content: (commonProps) => (/*跨級傳遞父級參數*/<EditContent record={record} {...commonProps} />
)
})
} >
修改Button>
);
}
}復制代碼

修改組件

import React from "react";
import { Button } from "antd";
export default function EditContent(props) {
const { record, editItem, setModalProps } = props;
const item = { name: "修改后的名字" };
return (
<div>
{item.name}<ButtononClick={() => {
editItem({ ...record, ...item });
setModalProps({ visible: false });
}} >
修改Button>div>
);
}復制代碼

叁 · 列表權限控制

根據不同的權限配置，展示不同的列表項

效果展示

權限配置

使用對象roleObj的權限配置方案，比if(){}else{}更簡介直觀

const [roleArr, setRoleArr] = useState([]);
const roleObj = {
0: [],
1: ["address", "operation"],
2: ["name", "age"]
};
。。。
<Radio.GrouponChange={(e) => setRoleArr(roleObj[e.target.value])}
defaultValue={0}
><Radio value={0}>展示全部Radio><Radio value={1}>不展示操作和地址Radio><Radio value={2}>不展示姓名和年齡Radio>Radio.Group>div>復制代碼

列表控制

根據傳過來的數組，進行列表項的過濾

style={{ marginTop: 20 }}
size="small"
dataSource={list}
columns={columns.filter((item) => !roleArr.includes(item.key))}
pagination={{
...pageConfig,
total: total,
onChange: changPage
}}
/>
復制代碼

肆 · 總結

針對前期的痛點，我們一一進行總結?完整代碼[1]

關于補丁

在處理查詢參數時，我們對查詢數據進行了搜索和分頁的分類存儲，但是都保存在一個變量里，如果后期加排序或者其他參數，不會影響之前的邏輯，可以在原有基礎上進行擴展，有效減少補丁的數量對彈窗參數數據的統一存儲，可以拓展彈窗的title或者其他屬性，不需要在添加state來打補丁，直接增加modalProps屬性即可

關于線網

把數據的加工都統一放在了業務邏輯層指index.js進行數據處理，提供給其他組件相應的處理函數對彈窗組件進行柯里化處理，不僅可以避免給列表傳遞非必要的參數，減少組件的刷新，還可以方便的跨級傳遞父級參數

關于斷線

在進行權限的處理時，我們并不需要存儲單選框的值，直接對數據進行處理即可(有的猿可能會存個state，通過state去更新選中的value)?

寫代碼之前一定要讓自己的思路清晰，進行思維碰撞后的你開發起來會更小的得心應手

?

最后

期許每個項目組猿們寫代碼都有一個統一清晰規范的思路，那無論你的換項目，還是交接給其他人都是可以無縫銜接

點個在看支持下?

總結

以上是生活随笔為你收集整理的antd table排序会触发到分页怎么解决_多年管理系统开发经验总结~代码解决方案...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。