a-table 表格中的编辑修改交互-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37984232/article/details/129299961

本文介绍如何在Ant Design的a-table中实现编辑、新增和删除交互，特别是在子组件中处理这些操作，并通过父组件调用接口。利用a-table的API如:expandedRowKeys、@expand和:rowClassName等，实现列表的展开、自定义图标、内容编辑及保存、取消功能。同时，文章讨论了数据状态管理，包括isEdit、copyWord、isShow和isOtherAdd属性的使用，以及正则验证和错误提示的处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

右侧的编辑/新增/删除+input框/√/×的交互都在子组件中，真正的接口调用在父组件中

因为是列表，涉及子组件的复用，所以交互在子组件中进行

点击右侧新增时，列表没有展开时，需要展开并新增节点，展开时则新增节点

采用a-table的API（:expandedRowKeys=“tableExpandedRowKeys” @expand=“onTableExpand”）

// table的展开收起事件
onTableExpand(expanded, record) {
  if (expanded) {
    this.tableExpandedRowKeys.push(record.key)
  } else {
    this.tableExpandedRowKeys.splice(this.tableExpandedRowKeys.indexOf(record.key), 1)
  }
},

列表展示，当有子选项时需要有可以点击展示子节点的icon

采用a-table的API（:expandIcon=“expandIcon”）进行自定义icon

// 修改列表展开的icon
expandIcon(props) {
  if (props.record.children && props.record.children.length > 0) {
    const list = props.record.children.filter((item) => item.isShow)
    // 判断是否有子节点
    if (list.length === 0) {
      return <span style={
    { 'margin-right': '19px' }}></span>
    }
    if (props.expanded) {
      return (
        <span
          className="table-icon"
          onClick={(e) => {
            props.onExpand(props.record, e)
          }}
        >
          <a-icon type="down" />
        </span>
      )
    } else {
      return (
        <span
          className="table-icon"
          onClick={(e) => {
            props.onExpand(props.record, e)
          }}
        >
          <a-icon type="right" />
        </span>
      )
    }
  } else {
    return <span style={
    { 'margin-right': '19px' }}></span>
  }
}