[feature request] expects the El table tree to support custom expansion and lazy loading

[swordYWQ]

Existing Component

是

Component Name

el-table

Description

目前el-table支持自定义调用toggleRowExpansion方法自定义展开expand或者表格树，但是不支持懒加载形式，期望能优化支持

/store/watcher.js

toggleRowExpansionAdapter(row, expanded) {
  const hasExpandColumn = this.states.columns.some(({ type }=> type === 'expand'));
  if(hasExpandColumn) {
    this.toggleRowExpansion(row, expanded);
  } else {
    this.toggleTreeExpansion(row,expanded); // 此处最好能支持调用到 this.loadOrToggle(row)
  }
}

谢谢!

[element-bot]

Translation of this issue:

Existing Component

yes

Component Name

el-table

Description

At present, El table supports custom calling the togglerowexpansion method to expand or table tree, but does not support lazy loading. It is expected to optimize the support

/store/ watcher.js

toggleRowExpansionAdapter(row, expanded) { const hasExpandColumn = this.states.columns .some(({ type }=> type === 'expand'));

if(hasExpandColumn) { this.toggleRowExpansion (row, expanded);

} else { this.toggleTreeExpansion (row, expanded); / / it is better to support calling to this.loadOrToggle (row)

} }

thank you!

[mrquokka]

Agree that, have some troubles with load on lazy load tree

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[hn4930]

这个问题存在很久了,在tree-table模式下,toggleRowExpansion只展开节点不加载数据,官方似乎没有修复的计划,这里提供一个hack方法吧 测试element版本:2.15.7 模版部分 <el-table ref="treeTable" lazy :row-key="rowKey" :load="load" > js部分:

import { getRowIdentity } from 'element-ui/packages/table/src/util.js'
...
   toggleRowExpansion(row, expanded) {
     debugger
     const { treeTable: { toggleRowExpansion, store }} = this.$refs
     const { states: { lazy, treeData, rowKey }, assertRowKey, loadData } = store
     assertRowKey()
     const id = getRowIdentity(row, rowKey)
     const data = treeData[id]

     /* 非公共方法操作,由于此版本treetable的toggleRowExpansion存
        在懒加载只展开不加载数据的bug,且官方无修复计划,故此处调用其私有方法,
        此处仿照loadOrToggle方法将会检测数据是否加载,
        未加载时加载后展开,已加载则调用toggleRowExpansion*/

     // 展开动作
     if (expanded) {
       // 是懒加载但是未完成加载操作的
       if (lazy && data && 'loaded' in data && !data.loaded) {
         // 执行加载动作并展开
         return loadData(row, id, data)
       }
     }
     return toggleRowExpansion(row, expanded)
   }

loadOrToggle方法源码