來(lái)源 | juejin.im/user/870468939940184??

作者 | 前端小月月

背景

最近的你有沒(méi)有接手的新項(xiàng)目，對(duì)這個(gè)有什么感覺(jué)？我最近接手了一個(gè)項(xiàng)目，先不論是否代碼行數(shù)的多少，僅是思路就很混亂，像是一件衣服在打補(bǔ)丁，而衣服上還有混亂的線網(wǎng)，數(shù)據(jù)繞來(lái)繞去，和斷掉的線頭，舉例說(shuō)明下

關(guān)于補(bǔ)丁

• 沒(méi)有對(duì)數(shù)據(jù)進(jìn)行擴(kuò)展處理，一個(gè)值一個(gè)變量。例如：獲取數(shù)據(jù)詳情返回的多個(gè)對(duì)象，便依次存儲(chǔ)多個(gè)對(duì)象，這樣在參數(shù)變更時(shí)，便要不停地補(bǔ)充參數(shù)，如果你使用的是react，就會(huì)發(fā)現(xiàn)大量的state還沒(méi)有注釋它是用來(lái)干什么的，不管對(duì)于維護(hù)者，還是初入者都是不友好的，其實(shí)我們可以存儲(chǔ)在一個(gè)變量里，在使用時(shí)直接調(diào)用對(duì)象的參數(shù)
• 列表的列表項(xiàng)[1，2，3，4，5]的展示，可能會(huì)根據(jù)權(quán)限展示不同的列表，剛開(kāi)始是1，2，3，根據(jù)==1，==2，==3，后來(lái)變成1，2，3，4，就。。。。
• 其實(shí)我們根據(jù)業(yè)務(wù)場(chǎng)景是否可以傳入一個(gè)數(shù)組arr=[1,2,3,4],根據(jù)includes判斷是否在數(shù)組內(nèi)(此處會(huì)在列表展示區(qū)做詳細(xì)解釋)

關(guān)于線網(wǎng)

• 把父級(jí)組件的靜態(tài)數(shù)據(jù)number=3，和回調(diào)方法傳給子類，回調(diào)方法里使用的卻是，子類傳回來(lái)的父類的靜態(tài)數(shù)據(jù)number

關(guān)于斷掉的線頭

• 例如使用antd的Tabs:如果只是單純的點(diǎn)擊切換模塊，沒(méi)有進(jìn)行模塊的特殊處理，則不需要onChange的方法，和狀態(tài)存儲(chǔ) ，確定我們想要的，避免無(wú)效代碼

關(guān)于以上的問(wèn)題，我基于以往的項(xiàng)目，整理了一下管理系統(tǒng)的組件結(jié)構(gòu)思路，希望可以在你的項(xiàng)目開(kāi)發(fā)中提供一些幫助

#概述

公共結(jié)構(gòu)

關(guān)于一個(gè)管理系統(tǒng)，使用最多的便是增刪改查，主要的邏輯是對(duì)數(shù)據(jù)的操作，基于以往的項(xiàng)目可以提取以下部分的公共結(jié)構(gòu)

數(shù)據(jù)流向

• 搜索排序分頁(yè)通過(guò)操作的參數(shù)獲取，列表的展示數(shù)據(jù)
• 列表操作區(qū)會(huì)根據(jù)刪除或者修改后，重新獲取列表數(shù)據(jù)

零 · 項(xiàng)目準(zhǔn)備

• 此次針對(duì) 搜索 列表 分頁(yè) 區(qū)域
• 使用react作范例，版本號(hào)如下

壹 · 存儲(chǔ)搜索參數(shù)數(shù)據(jù)+列表展示區(qū)

搜索和分頁(yè)數(shù)據(jù)需要統(tǒng)一存儲(chǔ)

頂端組件代碼和效果展示

搜索組件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="請(qǐng)輸入姓名關(guān)鍵字" />Form.Item><div><Button type="primary" htmlType="submit">
SubmitButton>div>Form>
);
};
export default SearchDemo;復(fù)制代碼

列表及分頁(yè)組件

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
}}
/>
);
}復(fù)制代碼

貳·列表操作區(qū)+列表展示區(qū)

?

列表操作可能同時(shí)存在多個(gè)彈窗，需對(duì)彈窗組件做統(tǒng)一參數(shù)處理，利用數(shù)據(jù)柯里化把父級(jí)參數(shù)運(yùn)輸?shù)阶咏M件內(nèi)

?

數(shù)據(jù)統(tǒng)一管理

業(yè)務(wù)邏輯層指index.js組件：負(fù)責(zé)整個(gè)頁(yè)面的結(jié)構(gòu)和邏輯處理

效果展示

數(shù)據(jù)存儲(chǔ)統(tǒng)一管理

• 彈窗數(shù)據(jù)統(tǒng)一管理

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

• 使用柯里化父級(jí)傳遞參數(shù)統(tǒng)一管理

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

列表組件新增操作項(xiàng)

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

修改組件

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>
);
}復(fù)制代碼

叁 · 列表權(quán)限控制

根據(jù)不同的權(quán)限配置，展示不同的列表項(xiàng)

效果展示

權(quán)限配置

使用對(duì)象roleObj的權(quán)限配置方案，比if(){}else{}更簡(jiǎn)介直觀

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>復(fù)制代碼

列表控制

根據(jù)傳過(guò)來(lái)的數(shù)組，進(jìn)行列表項(xiàng)的過(guò)濾

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

肆 · 總結(jié)

針對(duì)前期的痛點(diǎn)，我們一一進(jìn)行總結(jié)?完整代碼[1]

關(guān)于補(bǔ)丁

在處理查詢參數(shù)時(shí)，我們對(duì)查詢數(shù)據(jù)進(jìn)行了搜索和分頁(yè)的分類存儲(chǔ)，但是都保存在一個(gè)變量里，如果后期加排序或者其他參數(shù)，不會(huì)影響之前的邏輯，可以在原有基礎(chǔ)上進(jìn)行擴(kuò)展，有效減少補(bǔ)丁的數(shù)量對(duì)彈窗參數(shù)數(shù)據(jù)的統(tǒng)一存儲(chǔ)，可以拓展彈窗的title或者其他屬性，不需要在添加state來(lái)打補(bǔ)丁，直接增加modalProps屬性即可

關(guān)于線網(wǎng)

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

關(guān)于斷線

在進(jìn)行權(quán)限的處理時(shí)，我們并不需要存儲(chǔ)單選框的值，直接對(duì)數(shù)據(jù)進(jìn)行處理即可(有的猿可能會(huì)存?zhèn)€state，通過(guò)state去更新選中的value)?

寫(xiě)代碼之前一定要讓自己的思路清晰，進(jìn)行思維碰撞后的你開(kāi)發(fā)起來(lái)會(huì)更小的得心應(yīng)手

?

最后

期許每個(gè)項(xiàng)目組猿們寫(xiě)代碼都有一個(gè)統(tǒng)一清晰規(guī)范的思路，那無(wú)論你的換項(xiàng)目，還是交接給其他人都是可以無(wú)縫銜接

點(diǎn)個(gè)在看支持下?

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。