Table plus expandedRowKeys attribute, click on a line to expand and merge the question

expand by default. After that, for example, if I click on the operation date in the first column and cannot merge, how can I solve this?

onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({ selectedRowKeys,selectedRows });
}

const rowSelection = {
  selectedRowKeys,
  onChange: this.onSelectChange,
};
<Table
  expandedRowKeys={["1","1.1","2","3","6"]}
  loading={loading}
  rowSelection={dataSource.length?rowSelection:null}
  dataSource={dataSource}
  columns={columns}
  pagination={false}
  scroll={{x: 1000,y: 430}}
  rowKey={(record, index) => record.id}
/>

Javascript antd antdesign react.js

Jun.22,2022

is used with onExpand= {(expanded, record) = > {his.expandFunction (expanded, record)}}. In the expandFunction method, if you decide that expanded is true, put key into the expandedRowKeys array If it is false, remove key from the expandedRowKeys array

        rowKey="id"
        :columns="columns"
        :data="loadData"
        :expandedRowKeys="expandedKeys"
        @expand="onExpand"
        :showPagination="false"
      >

< hr >

onExpand (expanded, record) {

  if (expanded) {
    // Key
    this.onExpandedRowsChange(record);
  } else {
    if (this.expandedKeys.length) {
      this.expandedKeys = this.expandedKeys.filter(v => {
        return v != record.id;
      });
    }
  }
},
onExpandedRowsChange(rows) {
  this.expandedKeys.push(rows.id);
}

without looking closely at the document, it is used with the attribute onExpandedRowsChange.

Previous: The problem of axios sending request and passing parameters in vue

Next: Absolute positioning suspension layer style compatibility problem

How to modify the top of the Antd Transfer shuttle box.
how to modify the top of the Antd Transfer shuttle box like this ...

Javascript antd antdesign react.js

Mar.05,2021