Vue3 Antd 父子嵌套子表格

父子嵌套子表格

目標1：可以點擊多個父節(jié)點表格，正確顯示子表格數(shù)據(jù)

目標2：父表格數(shù)據(jù)刷新重載，解決子表格數(shù)據(jù)不刷新問題

官方示例代碼，以及效果
https://www.antdv.com/components/table-cn#components-table-demo-nested-table

可以看到官方示例十分簡單，使用了 <template #expandedRowRender> 插槽效果，并沒有后續(xù)的示例

 <template #expandedRowRender>
      <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'state'">
            <span>
              <a-badge status="success" />
              Finished
            </span>
          </template>
          <template v-else-if="column.key === 'operation'">
            <span class="table-operation">
              <a>Pause</a>
              <a>Stop</a>
              <a-dropdown>
                <template #overlay>
                  <a-menu>
                    <a-menu-item>Action 1</a-menu-item>
                    <a-menu-item>Action 2</a-menu-item>
                  </a-menu>
                </template>
                <a>
                  More
                  <down-outlined />
                </a>
              </a-dropdown>
            </span>
          </template>
        </template>
      </a-table>
    </template>

解決方案

使用@expand事件解決

     <a-table @expand="rowExpand" :loading="tableLoading" @change="tableChange"
                   :pagination="tablePagination" :columns="columns" :data-source="financeData"
                   :scroll="{ x: 1300, y: 1000 }" class="components-table-demo-nested"
                   :rowKey="(record,index)=>{return record.id}" bordered>
            <template  #expandedRowRender="{record}">
              <a-table :columns="innerColumns" :data-source="innerDataMap[record.id]" :rowKey="(record,index)=>{return record.id}"
                       :pagination="false">
              </a-table>
            </template>
              <span class="table-operation" @click="handleFinance(record)">
                <a-button type="link">處理
                 <template #icon><EditTwoTone/></template>
                </a-button>
              </span>
            </template>
          </a-table>

首先我們需要一個const expandedRowKeys = ref([]) 一個列表臨時存儲點擊展開的節(jié)點。

@expand=“rowExpand” 方法，監(jiān)聽展開的節(jié)點，把節(jié)點添加到緩存對象中

    function rowExpand(isExpand, record) {
      //提前為map.key =value 初始化一個空數(shù)組
      if (!innerDataMap.value[record.id]) {
        innerDataMap.value[record.id] = [];
      }

      if (isExpand) {
        // 將展開的行的 id 添加到 expandedRowKeys 數(shù)組中
        expandedRowKeys.value.push(record.id);

        // 將對應的子表格數(shù)據(jù)添加到 innerDataMap 中
        innerDataMap.value[record.id] = record.clist;
      } else {
        // 將展開的行的 id 從 expandedRowKeys 數(shù)組中刪除
        const index = expandedRowKeys.value.indexOf(record.id);
        if (index > -1) {
          expandedRowKeys.value.splice(index, 1);
        }

        // 將對應的子表格數(shù)據(jù)從 innerDataMap 中刪除
        delete innerDataMap.value[record.id];
      }

    }

可以看到嵌套子表格使用innerDataMap是一個Map而不是List，好處是，表格行數(shù)據(jù)更新，或者點擊表格上方查詢表格時，可以根據(jù)Map[Key]的方式刷新子表格數(shù)據(jù)

        <template  #expandedRowRender="{record}">
              <a-table :columns="innerColumns" :data-source="innerDataMap[record.id]" :rowKey="(record,index)=>{return record.id}"
                       :pagination="false">
              </a-table>
            </template>

點擊處理按鈕，修改當前父表格下子表格數(shù)據(jù)，這時候需要回調reload()重新加載表格，由于使用expandedRowKeys參數(shù)記錄展開節(jié)點，只需要在請求父表格接口時候遍歷更新innerDataMap容器就可以了。文章來源地址http://www.zghlxwxcb.cn/news/detail-428449.html

reload(){
    queryIList(toData)
      .then((res) => {
        financeData.value = res['list']
        tablePagination.total = res.totalCount
        // 獲取當前展開的所有行的 ID
        const expandedRowIds = expandedRowKeys.value;

        // 遍歷展開的行，更新對應的子表格數(shù)據(jù)
        expandedRowIds.forEach(id => {
          const record = financeData.value.find(record => record.id === id);
          if (record) {
            innerDataMap.value[id] = record.clist;
          }
        });
      })
      .catch((e) => {
        console.log('e', e);
      }).finally(() => {
      tableLoading.value = false
});

}

到了這里，關于Vue3 Antd 父子嵌套子表格的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！