React+Hook+ts+antDesign实现table行编辑功能(2)

简介: React+Hook+ts+antDesign实现table行编辑功能

对默认column的设置

以上是对column函数数据处理的讲解 接下来设置defaultColumn数据的设置 对可以操作的属性editable变为true即可

const defaultColumns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[] = [
        {
            title: '颜色',
            dataIndex: 'colorName',
            editable: false,
        },
        {
            title: '尺码',
            dataIndex: 'sizeName',
            editable: true,
        },
        {
            title: '扎号',
            dataIndex: 'lotCode',
            editable: false,
        },
        {
            title: '床号',
            dataIndex: 'bedCode',
            editable: false,
        },
        {
            title: '床次',
            dataIndex: 'bedSeq',
            editable: false,
        },
        {
            title: '每扎数量',
            dataIndex: 'lotCount',
            editable: false,
        },
        {
            title: '缸号',
            dataIndex: 'batchCode',
            editable: false,
        },
        {
            title: '裁片名称',
            dataIndex: 'cuttingName',
            editable: false,
        },
        {
            title: '结果',
            dataIndex: 'result',
            editable: false,
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (_, record: any) =>
                <a onClick={() => handlePrintData(_, record)}>打印</a>
        },
    ];

结果展示


image.png

双击即可进行编辑操作 这个问题相对还是非常简单的 对照官网的案例进行修改即可 我是歌谣 微信公众号前端小歌谣 谢谢你的一键三联

相关文章
|
6月前
|
前端开发 JavaScript
react 修改 antdesign 的 组件默认样式
react 修改 antdesign 的 组件默认样式
262 0
|
2月前
|
前端开发
react antd点击table行时加选中背景色
react antd点击table行时加选中背景色
86 5
|
3月前
|
前端开发 C++
使用 Vite 创建 React+TS+SW 项目并整合 AntDesign 、Scss 等组件或插件
本文记录了如何使用Vite创建一个React+TypeScript+Service Workers(SW)项目,并整合AntDesign组件库和Scss等插件,包括项目的创建、配置问题解决、AntDesign和Scss的整合方法。
255 1
|
3月前
|
前端开发 JavaScript 数据库
在 React 项目中 Editable Table 的实现
由于我们是把 state 存放在父组件的,每次请求会造成 table 进行 render 一遍,如果再加入 loading 等状态,render 次数会更多。Table 组件默认情况下没有对 rerender 行为做优化,父组件更新,如果 columns 中的提供了自定义 render 方法, 对应的每个 Cell 都会重新 render 。 针对这种情况我们就需要进行优化,根据 shouldCellUpdate 来自定义渲染时机。 那么每个 Cell 的渲染时机应该是: 1. FormItem 增删位置变动时 2. 该 Cell 消费的对应 tableOptions 变动时 第一种情况很好判
55 1
|
3月前
|
前端开发
React 中的 Hook 概念
【8月更文挑战第31天】
33 0
|
4月前
|
前端开发
React useImperativeHandle Hook
【7月更文挑战第1天】React useImperativeHandle Hook
28 3
|
4月前
|
前端开发 JavaScript 数据格式
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
93 1
|
4月前
|
前端开发
Vue3 【仿 react 的 hook】封装 useTitle
Vue3 【仿 react 的 hook】封装 useTitle
50 0
|
4月前
|
前端开发 API
Vue3 【仿 react 的 hook】封装 useLocation
Vue3 【仿 react 的 hook】封装 useLocation
40 0
|
6月前
|
前端开发 JavaScript
【边做边学】React Hooks (二)——useEffect Hook
【边做边学】React Hooks (二)——useEffect Hook