每次起一個文章名字的時候都很頭疼，不知道怎麼描述才算得上直截了當，直奔主題。

功能的使用場景

具體使用場景可以參考下圖，當時失敗原因下菜品多餘一個時，當前行可展開；當僅有一個菜品時，當前行不可展開。

解決思路

antd table要用到的屬性

• expandedRowRender：額外的展開行屬性，型別是個方法或者ReactNode
• rowClassName：設定行的class名稱

解決方案

1. 既然是可展開行，必然要使用expandedRowRender屬性，在expandedRowRender裡面返回一個新的table，用來承載多個菜品名稱。
2. 菜品名稱數組裡的第一個菜品在當前行展示，其餘的在展開的table裡顯示。
3. 如果只有一個菜品，則不需要可展開行。

存在的問題

表格渲染時已經將expandedRowRender屬性渲染出來，即便是方法返回一個null或者false，當前行還是會有一個可展開按鈕，點一個會有一行空白的表格。

解決問題

這種問題首先想到的是去看看原始碼這部分是怎麼實現的，看看有什麼方法能夠解決，果然有發現：

裡面去table裡面設定expandIconAsCell為false，期待頁面有所變化，結果並沒有卵用。 哪能怎麼辦呢？ 最笨的方法吧：我把可點選的那個展開按鈕隱藏掉，沒有按鈕你還咋點，哈哈哈！

問題2.0

可展開行按鈕是在行的維度渲染的，從那裡去控制依據當前行菜品陣列的長度來控制當前行的樣式呢？

解決問題2.0

1. 腦洞開啟，我要是能用css樣式查詢到父級，隱掉當前的樣式佈局不就好了嗎？立馬去查一下有沒有方法，哈哈哈原來想要這種方法的不止我一個，有方法，但是最快要到css4。目前瀏覽器都還沒用做支援。
2. jquery能查到，這方法保留吧，想想還有嗎？
3. 去翻翻文件，看看table有沒有方法能拿到每條記錄的值，並且執行結果還不會有比較嚴重的後果（要求不高，展示正常就行）。於是發現了rowClassName,沒想到它除了支援string居然還可以是function(record, index)，文件還是不熟悉啊，嗚嗚嗚。

解決方案

通過rowClassName的方法判斷當前行是否需要展開設定樣式，不可展開的設定class名稱為"noExpand"。 看程式碼吧！

const failurecolumns = [
    {
      title: '失敗原因',
      dataIndex: 'failureReason',
      key: 'failureReason',
    },
    {
      title: '菜譜名稱',
      dataIndex: 'pubitemNameList',
      key: 'pubitemNameList',
      render: text => text[0],
    },
  ];
const failedCol = [{
    key: 'null',
    render: () => '',
    width: '50%',
  }, {
    key: 'dishName',
    render: record => record,
  }];
  const tableProps = path === 'failure' ?
  {
    expandedRowRender: record =>
    (record.pubitemNameList.length > 1 ? <Table
      dataSource={_.drop(record.pubitemNameList)}
      pagination={false}
      columns={failedCol}
      showHeader={false}
      rowKey={i => i}
    /> : null),
  } : {};
  return (
    <Table
      {...tableProps}
      dataSource={storeList}
      columns={failurecolumns}
      pagination={storePage}
      onChange={page => onPageModal(page)}
      rowKey={record => `${record.id}${Math.random()}`}
      rowClassName={record => record.pubitemNameList && record.pubitemNameList.length === 1 && 'noExpand'}
    />
  );

less檔案：

  // 可展開單元格無可展開項時
  .noExpand {
    .ant-table-row-expand-icon {
      display: none;
    }
  }

總結

功能實現起來不太困難，但是方法也不太優雅。如果文件更熟悉一點的話，這問題肯能解決的更快一些。