a-table 表格中的编辑修改交互

最新推荐文章于 2024-05-11 16:37:45 发布

码媛111

最新推荐文章于 2024-05-11 16:37:45 发布

阅读量1.6k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_37984232/article/details/129299961

版权

需求

右侧的编辑/新增/删除+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>
  }
}