antd的Table组件实现单元格可编辑

目录

官网做法

其他做法

首先，官网文档上是有可编辑单元格和可编辑行的。我研究了好几遍，也是半知半解，只会用

官网做法

• 有一定的局限性，单元格内只能是输入框(我试了一些别的，不太行)

代码直接照着文档粘贴，只说一下需要改动的地方

table的数据源，我们都是后端获取，所以这里把默认的清空就行。请求接口获取数据源，直接set进去就行

然后记得给 Table 标签添加 rowKey 属性，绑定唯一值

如果想单元格可编辑，记得添加 editable: true,

下面是我自己练习的一个案例

import { Form, Input, Popconfirm, Table, Button } from 'antd'import React, { useContext, useEffect, useRef, useState } from 'react'import './Lll.css'import axios from 'axios'const EditableContext = React.createContext(null)const EditableRow = ({ index, ...props }) => {const [form] = Form.useForm()return ()}const EditableCell = ({title,editable,children,dataIndex,record,handleSave,...restProps}) => {const [editing, setEditing] = useState(false)const inputRef = useRef(null)const form = useContext(EditableContext)useEffect(() => {if (editing) {inputRef.current.focus()}}, [editing])const toggleEdit = () => {setEditing(!editing)form.setFieldsValue({[dataIndex]: record[dataIndex],})}const save = async () => {try {const values = await form.validateFields()toggleEdit()handleSave({...record,...values,})} catch (errInfo) {console.log('Save failed:', errInfo)}}let childNode = childrenif (editable) {childNode = editing " />{paddingRight: 24,}}onClick={toggleEdit}>{children})}return {childNode}}const Lll = () => {const [dataSource, setDataSource] = useState([])const handleDelete = (key) => {const newData = dataSource.filter((item) => item.key !== key)setDataSource(newData)}const defaultColumns = [{title: '标题',dataIndex: 'title',width: '30%',editable: true,ellipsis: true,},{title: '分类',dataIndex: 'tab',editable: true,width: '20%',},{title: '浏览量',dataIndex: 'reply_count',editable: true,width: '20%',},{title: 'operation',dataIndex: 'operation',render: (_, record) =>dataSource.length >= 1 ? ( handleDelete(record.key)}>删除) : null,},]const handleSave = (row) => {const newData = [...dataSource]const index = newData.findIndex((item) => row.key === item.key)const item = newData[index]newData.splice(index, 1, {...item,...row,})setDataSource(newData)}const components = {body: {row: EditableRow,cell: EditableCell,},}const columns = defaultColumns.map((col) => {if (!col.editable) {return col}return {...col,onCell: (record) => ({record,editable: col.editable,dataIndex: col.dataIndex,title: col.title,handleSave,}),}})// 点击收集const shouji = () => {console.log('收集到的值为', dataSource)}// 初始化操作useEffect(() => {axios.get('https://cnodejs.org/api/v1/topics').then((res) => {setDataSource(res.data.data)}).catch((err) => console.log(err))}, [])return ( 'editable-row'}bordereddataSource={dataSource}columns={columns}rowKey={(record) => record.id}/>收集值)}export default Lll

其他做法

• 主要是用到了数据驱动视图的思想，只要数据变了，视图自然更新。需要什么标签，render里就写什么
• render属性的值是个函数，默认有三个参数，第一个参数是当前行渲染的数据，第二个参数是后端返回给我们的完整的当前行数据，第三个参数是索引
• 加的有校验，不想加校验就把Form相关的去掉就行

import React, { useState } from 'react'import { Space, Table, Input, Button, DatePicker, Form } from 'antd'import moment from 'moment'export default function Mmm() {const [form] = Form.useForm()const columns = [{title: '标题',dataIndex: 'title',key: 'title',render: (_, record, index) => ( upTitle(e, index)} />),},{title: '时间',dataIndex: 'time',key: 'time',render: (_, record, index) => ( upTime(time, index)} />),},{title: '操作',key: 'action',render: (_, record, index) => ( delItem(index)}>删除),},]const [data, setData] = useState([{id: 0,title: '标题1',time: '2023-03-13',},{id: 1,title: '标题2',time: '2023-03-14',},])// 标题修改后失焦const upTitle = (e, index) => {let newArr = JSON.parse(JSON.stringify(data))newArr[index].title = e.target.valuesetData(newArr)}// 时间选择后const upTime = (time, index) => {let newArr = JSON.parse(JSON.stringify(data))newArr[index].time = time?.format('YYYY-MM-DD') || ''setData(newArr)}// 点击删除const delItem = (index) => {let newArr = JSON.parse(JSON.stringify(data))newArr.splice(index, 1)setData(newArr)}// 点击收集数据按钮const getData = () => {form.validateFields().then((res) => {// console.log(res)console.log('收集到的数据为', data)})}return ( record.id}/>收集数据)}