长沙o2o网站制作公司,生道网站建设平台,百度推广官方电话,h5编辑工具时间戳转格式 // 获取当前时间戳#xff08;示例#xff09;
const timestamp Date.now(); // 或者使用特定的时间戳值// 创建一个新的Date对象#xff0c;并传入时间戳
const date new Date(timestamp);// 获取年、月、日的值
const year date.getFullYear();
const mon…时间戳转格式 // 获取当前时间戳示例
const timestamp Date.now(); // 或者使用特定的时间戳值// 创建一个新的Date对象并传入时间戳
const date new Date(timestamp);// 获取年、月、日的值
const year date.getFullYear();
const month String(date.getMonth() 1).padStart(2, 0); // 月份从0开始需要1然后使用padStart方法补零
const day String(date.getDate()).padStart(2, 0); // 使用padStart方法补零// 将年、月、日拼接为所需的日期格式
const formattedDate ${year}-${month}-${day};console.log(formattedDate); // 输出2018-09-12方法二const dateString Fri Aug 25 2023 14:10:13 GMT0800 (中国标准时间);
const regex /\w{3} (\w{3} \d{2} \d{4}).*/; // 匹配并提取日期部分const match dateString.match(regex);
const formattedDate match ? match[1] : ;console.log(formattedDate); // 输出2023-08-25
禁用的表单
import { Button, Form, Input } from antd;
import React, { useEffect, useRef } from react;
const { TextArea } Input;
const FormPage () {const formRef useRefany(null);const data [{id: 1,num: 10991,name: 黑色耳机,commodityType: RJ,text: 如果它们不相关那么存在多个 state 变量是一个好主意例如本例中的 index 和 showMore。但是如果你发现经常同时更改两个 state 变量那么最好将它们合并为一个。,textDate: 2023-10-01 10:36:03,},];// 方法一// useEffect(() {// formRef.current?.setFieldsValue(data[0]);// }, []);return (div classNameboxdiv{/* 方法二 */}Button onClick{() formRef.current?.setFieldsValue(data[0])}填入内容/Button/divFormref{formRef}disablednamebasiclabelCol{{ span: 3 }}wrapperCol{{ span: 16 }}Form.Item label物品号码 namenumInput //Form.ItemForm.Item label物品名称 namenameInput //Form.ItemForm.Item label物品名称类型 namecommodityTypeInput //Form.ItemForm.Item label物品详细概述 nametextTextArea //Form.ItemForm.Item label物品录入时间 nametextDateTextArea //Form.Item/Form/div);
};export default FormPage;删除多选表格
import React, { useState } from react;
import { Button, Table, message } from antd;
import type { ColumnsType } from antd/es/table;// 可选择删除列表interface DataType {key: React.Key;name: string;age: number;address: string;
}const columns: ColumnsTypeDataType [{title: Name,dataIndex: name,},{title: Age,dataIndex: age,},{title: Address,dataIndex: address,},{title: Controls,dataIndex: Controls,render: () Button显示/Button,},
];// for (let i 6; i 46; i) {
// data.push({
// key: i,
// name: Edward King ${i},
// age: 32,
// address: London, Park Lane no. ${i},
// });
// }const TablePage: React.FC () {/* selectedRowKeys 指定选中项的 key 数组需要和 onChange 进行配合在此处通过 rowSelection.selectedRowKeys 来控制选中项。*/const [selectedRowKeys, setSelectedRowKeys] useStateReact.Key[]([]);// loading 页面是否加载中const [loading, setLoading] useState(false);const [data, setData] useState([{ key: t, name: 唐诗, age: 18, address: 唐朝 },{ key: s, name: 宋词, age: 18, address: 宋朝 },{ key: y, name: 元曲, age: 18, address: 元朝 },{ key: m, name: 明文, age: 18, address: 明朝 },{ key: q, name: 清小说, age: 18, address: 清朝 },]);// 点击了清空const start () {setLoading(true);// ajax request after empty completingsetTimeout(() {setSelectedRowKeys([]);setLoading(false);}, 1000);};// onSelectChange 触发了选择改变const onSelectChange (newSelectedRowKeys: React.Key[]) {console.log(selectedRowKeys changed: , newSelectedRowKeys);setSelectedRowKeys(newSelectedRowKeys);};// 开启可选则按钮const rowSelection {selectedRowKeys,onChange: onSelectChange,};//禁用const hasSelected selectedRowKeys.length 0;// 删除const deleteList () {console.log(selectedRowKeys);const dataVale data.filter((item) !selectedRowKeys.includes(item.key));setData(dataVale);console.log(dataVale);// 提示框message.success(删除成功);};return (divdiv style{{ marginBottom: 16 }}ButtontypeprimaryonClick{start}disabled{!hasSelected}loading{loading}清空/Button{ }nbsp;Button onClick{deleteList}删除/Buttonspan style{{ marginLeft: 8 }}{hasSelected ? 你选择了 ${selectedRowKeys.length} 个 : }/span/div{/* rowSelection :表格行是否可选择配置项columns 表格列的配置描述dataSource 数据数组*/}Table rowSelection{rowSelection} columns{columns} dataSource{data} //div);
};export default TablePage;
文字内容 import Button from antd/lib/button;
import ./index.css;
import { ShareAltOutlined } from ant-design/icons;
const TextContent () {return (div classNameboxdiv classNametextContentp1. 当一个组件需要在多次渲染间“记住”某些信息时使用 state 变量。 /pp2. Hook 是以 use 开头的特殊函数。它们能让你 “hook” 到像 state 这样的 React 特性中。/p/divbr /divButton typeprimary提交表单校验 ShareAltOutlined //Button/div/div);
};export default TextContent;
css
.textContent {border: solid 1px #c9c9c9;background-color: #f7f8fa;padding: 10px;width: 680px;
}.textContent p {margin: 0;padding: 0;color: #636364;
}.textContent p:first-child {/* 样式规则 */margin: 0 0 10px 0;
}
筛选对象 const filteredData Object.fromEntries(Object.entries(dataList).filter(([key, value]) value ! undefined)
);add
specificationModel/create1. dataLength: 32
1. goodsSpecificationModel: 2|1|34|wer|we|we|we|we|fg|gf|fgd
1. headId: 01H7HWTXWRWJMF6Z30BG556H0T
自封装表格
import ./index.css;
import React from react;
import { Switch } from antd;
import { useState } from react;const TableModule () {const data: any [{materialNo: asfcas21345r1c,goodsName: 红茶,codeTs: 11012,antd: 109,},{materialNo: asfcas21345r1c,goodsName: 鼠标垫,codeTs: 11013,antd: 109,},{materialNo: asfcas21345r1c,goodsName: 楼房,codeTs: 11014,antd: 109,},];const table [商品料号, 商品名称, 商品编码];//const uniqueData: any [];const uniqueValues: any {};for (const obj of data) {const values Object.values(obj).join(-);if (!uniqueValues[values]) {uniqueValues[values] true;uniqueData.push(obj);}}console.log(36, uniqueData);return (div classNameboxdiv classNametable-containerdiv classNameheader-column{table.map((item, index) {return (div key{index} classNameheader-row{item}/div);})}/div{data.map((item: any) {return (div classNamedata-column key{item.codeTs}div classNamedata-row{item.codeTs}/divdiv classNamedata-row{item.goodsName}/divdiv classNamedata-row{item.materialNo}/div/div);})}/div/div);
};export default TableModule;
css.table-container {box-shadow: 0 0 0 1px #b0b0b0;display: flex;
}.header-column,
.data-column {border-left: 1px solid #b0b0b0;flex: 1;
}.header-row,
.data-row {border-top: 1px solid #b0b0b0;padding: 8px;
}
.header-row {background-color: #efefef;
}.header-row:last-child,
.data-row:last-child {border-bottom: 1px solid #b0b0b0;
}
模态框
import ./index.css;
import React, { useState } from react;
import { Button, Checkbox, Form, Input, Modal, Select } from antd;
import { useEffect } from react;
import { InfoCircleOutlined } from ant-design/icons;const { Option } Select;type FieldType {username?: string;password?: string;remember?: string;
};const ModalBox: React.FC () {const [open, setOpen] useState(false);const [confirmLoading, setConfirmLoading] useState(false);const [specification, setSpecification] useStateany();const [form] Form.useForm();// const [zf, setZf] useState();// const [energy, setEnergy] useState();// const [dbz, setDbz] useState();// const [tshhw, setTshhw] useState();// const [tang, setTang] useState();// const [na, setNa] useState();// const [wss, setWss] useState();const onFinish (values: any) {console.log(Success:, values);};const onFinishFailed (errorInfo: any) {console.log(Failed:, errorInfo);};const onChangeEnergy (value: string) {console.log(value);};const onChangeWss (value: string) {console.log(value);};const onValuesChange (value: any) {// setZf(value.zf zf);// setEnergy(value.energy energy);// setDbz(value.dbz dbz);// setTshhw(value.tshhw tshhw);// setTang(value.tang tang);// setNa(value.na na);// setWss(value.wss wss);console.log(50, value);};useEffect(() {const getFormValueData () {};}, [specification]);// 显示模态框const showModal () {setOpen(true);};// 点击了确定const handleOk () {setConfirmLoading(true);setTimeout(() {setOpen(false);setConfirmLoading(false);}, 1000);};// 点击了取消const handleCancel () {console.log(Clicked cancel button);setOpen(false);};return (div classNameboxButton typeprimary onClick{showModal}添加/ButtonModaltitle申报规范width{40%}open{open}onOk{handleOk}confirmLoading{confirmLoading}onCancel{handleCancel}div classNamemodalInputBoxspan商品信息/spanInput classNamemodalInput disabled value100237-普洱茶 //divdivbr /h3 classNamemodal-h规格型号 根据 LZ 公司规定需全部填写/h3div classNamemodal-formFormlabelCol{{ span: 4 }}wrapperCol{{ span: 19 }}namebasicinitialValues{{ remember: true }}// 提交表单且数据验证成功后回调事件onFinish{onFinish}// 提交表单且数据验证失败后回调事件onFinishFailed{onFinishFailed}autoCompleteoff// 字段值更新时触发回调事件// onValuesChange{onValuesChange}layouthorizontallabelWrapForm.Itemlabel能量nameenergyrules{[{ required: true, message: 请填写内容 }]}tooltip{{title: 补充能量增强体质,icon: InfoCircleOutlined /,}}Select onChange{onChangeEnergy} allowClearOption value100g100g/OptionOption value500g500g/OptionOption value1000g1000g/Option/Select/Form.ItemForm.Itemlabel蛋白质namedbztooltip蛋白质rules{[{ required: true, message: 请填写内容 }]}Input //Form.ItemForm.Itemlabel脂肪namezfrules{[{ required: true, message: 请填写内容 }]}Input //Form.ItemForm.Itemlabel碳水化合物nametshhwrules{[{ required: true, message: 请填写内容 }]}Input //Form.ItemForm.Itemlabel--糖nametangrules{[{ required: true, message: 请填写内容 }]}Input //Form.ItemForm.Itemlabel钠namenarules{[{ required: true, message: 请填写内容 }]}Input //Form.ItemForm.Itemlabel茶多酚柑皮因子nametangrules{[{ required: true, message: 请填写内容 }]}Input //Form.ItemForm.Itemlabel维生素namewssrules{[{ required: true, message: 请填写内容 }]}Select onChange{onChangeWss} allowClearOption value维生素 A维生素 A/OptionOption value维生素 B维生素 B/OptionOption value维生素 C维生素 C/Option/Select/Form.ItemForm.Itemlabel碳酸氢钠nametsqnrules{[{ required: true, message: 请填写内容 }]}Input //Form.Item/Form/div/divdiv classNamemodalInputBoxbr /span规格型号/spanInputclassNamemodalInputdisabled// value{// zf // | // energy // | // dbz // | // tshhw // | // tang // | // na // | // wss// }//div/Modal/div);
};export default ModalBox;css
.modalInputBox {margin: 0 0 0 7%;
}
.modalInput {width: 80%;
}.modal-h {font-weight: 700;
}.modal-form {width: 100%;height: 300px;overflow: auto;border: solid 1px #e0e0e0;padding: 10px;
}/* 修改滚动条轨道的样式 */
::-webkit-scrollbar {width: 10px; /* 设置滚动条的宽度 */
}/* 修改滚动条的滑块样式 */
::-webkit-scrollbar-thumb {background-color: #e0e0e0; /* 设置滚动条滑块的背景色 */border-radius: 5px;
}/* 修改滚动条的滑轨样式 */
::-webkit-scrollbar-track {background-color: #f1f1f1; /* 设置滚动条轨道的背景色 */
}
步骤条
import React from react;
import { Steps } from antd;
import { CheckCircleFilled } from ant-design/icons;
import ./index.css;
import { useState } from react;const StepsModule: React.FC () {const [editState, setEditState] useState(false);return (div classNameboxStepsdirectionverticalcurrent{1}sizesmallitems{[{title: (divclassNamefinishedBoxonClick{() setEditState(!editState)}p classNamefinishedTextspan审核通过 2023-01-04/spanspan classNamefinishedSpan/spanspan13:14:35/span/ppclassName{editState? finishedCuntent : finishedCuntent finishedNone}一级审核人员大河审核已通过/p/div),icon: CheckCircleFilled /,},{title: (divclassNamefinishedBoxonClick{() setEditState(!editState)}p classNamefinishedTextspan审核通过 2023-01-04/spanspan classNamefinishedSpan/spanspan13:14:35/span/pp classNamefinishedCuntent 一级审核人员大河审核已通过/p/div),icon: CheckCircleFilled /,},{title: (divclassNamefinishedBoxonClick{() setEditState(!editState)}p classNamefinishedTextspan审核通过 2023-01-04/spanspan classNamefinishedSpan/spanspan13:14:35/span/ppclassName{editState? finishedCuntent : finishedCuntent finishedNone}一级审核人员大河审核已通过/p/div),icon: CheckCircleFilled /,},]}//div);
};export default StepsModule;css.finishedBox {width: 300px;display: flex;flex-direction: column;padding: 0;margin: 0 0 20px 0;border: solid 1px #1677ff;
}.finishedText {color: #1677ff;font-weight: 500;margin: 5px 5px 5px 10px;
}.finishedSpan {width: 60px;display: inline-block;
}.finishedCuntent {padding: 0 0 5px 10px;margin: 0;
}.finishedNone {display: none;
}
搜索框
import type { ProFormColumnsType } from ant-design/pro-components;
import { BetaSchemaForm } from ant-design/pro-components;type DataItem {name: string;state: string;
};const columns: ProFormColumnsTypeDataItem[] [{valueType: dependency,name: [type],columns: ({ type }) {return [{dataIndex: discount,width: m,},];},},
];const MainPage () {return (BetaSchemaFormDataItemlayoutTypeQueryFilteronFinish{async (values) {console.log(values);}}columns{columns}//);
};// export default
export default MainPage;Tree 树
import React, { useMemo, useState } from react;
import { Input, Tree } from antd;
import type { DataNode } from antd/es/tree;
import ./index.css;const { Search } Input;const defaultData: DataNode[] [{key: adult,title: 成年人,children: [{key: man,title: 男人,children: [{key: father,title: 父亲,},],},{key: woman,title: 女人,children: [{key: mother,title: 母亲,},],},],},{key: juveniles,title: 未成年人,children: [{key: boy,title: 男孩,children: [{key: son,title: 儿子,},],},{key: girl,title: 女孩,children: [{key: daughter,title: 女儿,},],},],},
];const dataList: { key: React.Key; title: string }[] [];
const generateList (data: DataNode[]) {for (let i 0; i data.length; i) {const node data[i];const { key } node;dataList.push({ key, title: key as string });if (node.children) {generateList(node.children);}}
};
generateList(defaultData);const getParentKey (key: React.Key, tree: DataNode[]): React.Key {let parentKey: React.Key;for (let i 0; i tree.length; i) {const node tree[i];if (node.children) {if (node.children.some((item) item.key key)) {parentKey node.key;} else if (getParentKey(key, node.children)) {parentKey getParentKey(key, node.children);}}}return parentKey!;
};const TestPage: React.FC () {const [expandedKeys, setExpandedKeys] useStateReact.Key[]([]);const [searchValue, setSearchValue] useState();const [autoExpandParent, setAutoExpandParent] useState(true);// 展开/收起节点时触发const onExpand (newExpandedKeys: React.Key[]) {setExpandedKeys(newExpandedKeys);setAutoExpandParent(false);};// const onChangeClict (e) {// console.log(触发搜索);// onChange(e);// };// 触发搜索const onChange (e: React.ChangeEventHTMLInputElement) {const { value } e.target;const newExpandedKeys dataList.map((item) {if (item.title.indexOf(value) -1) {return getParentKey(item.key, defaultData);}return null;}).filter((item, i, self) item self.indexOf(item) i);setExpandedKeys(newExpandedKeys as React.Key[]);setSearchValue(value);setAutoExpandParent(true);};// 数据const treeDataList useMemo(() {const loop (data: DataNode[]): DataNode[] data.map((item) {const strTitle item.title as string;const index strTitle.indexOf(searchValue);const beforeStr strTitle.substring(0, index);const afterStr strTitle.slice(index searchValue.length);const title index -1 ? (span{beforeStr}span classNamesite-tree-search-value{searchValue}/span{afterStr}/span) : (span{strTitle}/span);if (item.children) {return { title, key: item.key, children: loop(item.children) };}return {title,key: item.key,};});return loop(defaultData);}, [searchValue]);return (divSearchstyle{{ marginBottom: 8 }}placeholder搜索onChange{onChange}/{/* expandedKeys 受控展开指定的树节点onExpand 展开/收起节点时触发autoExpandParent 是否自动展开父节点 */}TreeonExpand{onExpand}expandedKeys{expandedKeys}autoExpandParent{autoExpandParent}treeData{treeDataList}//div);
};export default TestPage;
封装axios
// 封装axios
import axios from axiosconst instance axios.create({baseURL: http://geek.itheima.net/v1_0/,timeout: 5000
})// 添加请求拦截器
instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config},function (error) {// 对请求错误做些什么return Promise.reject(error)}
)// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 对响应数据做点什么return response},function (error) {// 对响应错误做点什么return Promise.reject(error)}
)export default instanceCSS滚动样式
/* 设置滚动条的整体样式 */
::-webkit-scrollbar {width: 10px; /* 滚动条的宽度 */height: 8px;background-color: #f2f2f2; /* 滚动条的背景颜色 */
}/* 设置滚动条的滑块样式 */
::-webkit-scrollbar-thumb {margin: 4px 0;background-color: #d9dadc; /* 滑块的颜色 */border-radius: 5px; /* 滑块的圆角 */
}/* 设置滚动条鼠标悬停时滑块的样式 */
::-webkit-scrollbar-thumb:hover {background-color: #9a9a9a; /* 鼠标悬停时滑块的颜色 */box-shadow: 2px 2px 5px;
}/* 设置滚动条轨道样式 */
::-webkit-scrollbar-track {background-color: #ebebeb; /* 轨道的背景颜色 */
}
Tree
import ./index.css;
import {CarryOutOutlined,CaretDownOutlined,FormOutlined,CheckOutlined,
} from ant-design/icons;
import { Select, Switch, Tree } from antd;
import { useState } from react;const treeData [{title: parent 1,key: 0-0,icon: CarryOutOutlined /,children: [{title: parent 1-0,key: 0-0-0,icon: CarryOutOutlined /,children: [{title: leaf,key: 0-0-0-0,icon: CarryOutOutlined /,},{title: (divmultiple line title/divdivmultiple line title/div/),key: 0-0-0-1,icon: CarryOutOutlined /,},{title: leaf,key: 0-0-0-2,icon: CarryOutOutlined /,},],},{title: parent 1-1,key: 0-0-1,icon: CarryOutOutlined /,children: [{title: leaf,key: 0-0-1-0,icon: CarryOutOutlined /,},],},{title: parent 1-2,key: 0-0-2,icon: CarryOutOutlined /,children: [{title: leaf,key: 0-0-2-0,icon: CarryOutOutlined /,},{title: leaf,key: 0-0-2-1,icon: CarryOutOutlined /,switcherIcon: FormOutlined /,},],},],},{title: parent 2,key: 0-1,icon: CarryOutOutlined /,children: [{title: parent 2-0,key: 0-1-0,icon: CarryOutOutlined /,children: [{title: leaf,key: 0-1-0-0,icon: CarryOutOutlined /,},{title: leaf,key: 0-1-0-1,icon: CarryOutOutlined /,},],},],},
];const Treemodule () {return (div classNamebox-tree TreeshowLine{CheckOutlined /}defaultExpandedKeys{[0-0]}switcherIcon{CaretDownOutlined /}treeData{treeData}//div);
};export default Treemodule;
Form
import React from react;
import ./index.css;
import { Button, Form, Input, Select, Row, Col } from antd;
import type { FormInstance } from antd/es/form;const { Option } Select;const itemLayout {labelCol: {span: 5,},wrapperCol: {span: 19,},
};const FromE () {const formRef React.useRefFormInstance(null);const onGenderChange (value: string) {switch (value) {case male:formRef.current?.setFieldsValue({note: 1111,num: 1001,computeNum: 只,});break;case female:formRef.current?.setFieldsValue({ note: 2222 });break;case other:formRef.current?.setFieldsValue({ note: 3333 });break;default:break;}};const onFinish (values: any) {console.log(values);};return (div classNamefrom-boxFormref{formRef}namesearch-forminitialValues{{}}onFinish{onFinish}layoutinlinelabelWrapRowCol span{8}Form.ItemclassNameinline-form-itemlabel标签1342312312312323input classNameinline-input //Form.Item/ColCol span{8}Form.ItemclassNameinline-form-itemlabel标签1342312312312323input classNameinline-input //Form.Item/ColCol span{8}Form.Item classNameinline-form-item label标2312312323input classNameinline-input //Form.Item/ColCol span{8}Form.Item classNameinline-form-item label标签13input classNameinline-input //Form.Item/ColCol span{8}Form.Item classNameinline-form-item label标312312312323input classNameinline-input //Form.Item/ColCol span{8}Form.Item classNameinline-form-item label标2323input classNameinline-input //Form.Item/Col/Row/Form/div);
};export default FromE;
简单 Form
import { Button, Form, Input, Col, Row } from antd;
import { useRef } from react;
import ./index.css;
// const { Option } Select;const FormC () {//------------------------------------------dataconst [form] Form.useForm();const formRef useRef();const itemLayout {labelCol: {span: 5,},wrapperCol: {span: 19,},};//------------------------------------------functionconst onFinish (values) {console.log(Success:, values);};const onReset () {form.resetFields();};//------------------------------------------htmlreturn (Formform{form}ref{formRef}namesearch-forminitialValues{{}}onFinish{onFinish}RowCol span{6}Form.Item nameproductId label产品ID {...itemLayout}Input //Form.Item/ColCol span{6}Form.Item nameproductName label产品名称 {...itemLayout}Input //Form.Item/ColCol span{6}Form.Item nameindustry label所属品类 {...itemLayout}Input //Form.Item/ColCol span{6}Form.Item nameeqType label设备类型 {...itemLayout}Input //Form.Item/ColCol span{6}Form.Item nameagreeType label协议类型21313231 {...itemLayout}Input //Form.Item/ColCol span{6}Form.Item namecreatTime label创建时间 {...itemLayout}Input //Form.Item/ColCol span{6}Form.Item {...itemLayout}Button typeprimary htmlTypesubmit查询/ButtonButton htmlTypebutton onClick{onReset}重置/Button/Form.Item/Col/Row/Form);
};export default FormC;
表格
import { Table, Button } from antd;
import ./index.css;
import {useState,forwardRef,useImperativeHandle,useRef,createContext,
} from react;
import { titleData, mokeData } from ../../moke/index;
import Form from ../form;export const ThemeContext createContext(null);const Tabulation forwardRef(({ newValue }, ref) {const [newMokeData, setNewMokeData] useState(mokeData);const [ControlsNewValue, setControlsNewValue] useState();const [echoData, setEchoData] useState({ciqName: 种用大麦,ciqType: D/M,codeTs: 1003100000,});const columns [{title: titleData[0],key: 1,dataIndex: key,rowScope: row,width: 100,},{title: titleData[1],dataIndex: ciqCode,key: 2,width: 200,},{title: titleData[2],dataIndex: ciqName,key: 3,width: 200,},{title: titleData[3],dataIndex: ciqType,key: 4,width: 200,},{title: titleData[4],dataIndex: codeTs,key: 5,width: 200,},{title: titleData[5],dataIndex: commRate,key: 6,width: 200,},{title: titleData[6],dataIndex: createTime,key: 7,width: 200,},{title: titleData[7],dataIndex: createUserId,key: 8,width: 300,},{title: titleData[8],dataIndex: createUserId,key: titleData[8].length 1,width: 300,},{title: titleData[9],dataIndex: dclUnit,key: titleData[9].length 1,width: 200,},{title: titleData[10],dataIndex: deleted,key: titleData[10].length 1,width: 200,},{title: titleData[10],dataIndex: deleted,key: titleData[10].length 1,width: 200,},{title: titleData[10],dataIndex: deleted,key: titleData[10].length 1,width: 200,},{title: 操作列,key: operation,fixed: right,width: 250,render: (id) (divButton onClick{() viewData(id)}查看/Buttonnbsp;nbsp;Button修改/Buttonnbsp;nbsp;Button typeprimary更多/Button/div),},];const viewData (id) {setEchoData(id);formRef.current.showModal();console.log(ck, id, echoData);};const editMokeData () {setControlsNewValue({id: 1,key: Date.now(),...newValue,codeTs: 1003100000,commRate: null,createTime: 1690334576223,createUserId: 01H321BXCVNJMK38KE3BJ29EKE,createUserName: 张三,dclUnit: 002,deleted: 0,firstUnit: 1009,goodsModel:0:品牌类型|1:出口享惠情况|2:是否改良种用|3:品种|4:GTIN|5:CAS|6:其他,goodsName: 种用大麦,});console.log(newValue);setNewMokeData([...newMokeData, ControlsNewValue]);};useImperativeHandle(ref, () ({editMokeData,}));const formRef useRef(null);return (ThemeContext.Provider value{echoData}div classNameboxTablecolumns{columns}dataSource{newMokeData}scroll{{x: 1300,y: 200,}}/Form ref{formRef}/Form/div/ThemeContext.Provider);
});export default Tabulation;
Button
import type { MenuProps } from antd;
import { Button, Dropdown } from antd;
import ./index.css;const items: MenuProps[items] [{key: 1,label: (atarget_blankrelnoopener noreferrerhrefhttps://www.antgroup.comdiv classNamebut删除/div/a),},{key: 2,label: (atarget_blankrelnoopener noreferrerhrefhttps://www.aliyun.comdiv classNamebut变更/div/a),},
];const ButtonModule () {return (divButton查看/Buttonnbsp;Button修改/Buttonnbsp;Dropdown menu{{ items }} trigger{[click]} placementbottomRightButton typeprimary更多/Button/Dropdownnbsp;/div);
};export default ButtonModule;
