github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Table: fix input stuck in table with large data

pull/22293/head
JR 2022-11-29 16:57:26 +08:00
parent fa18776b4b
commit a3922939c9
1 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/table/src/table-body.js
View File

@ -33,6 +33,8 @@ export default {
render(h) { render(h) {
const data = this.data || []; const data = this.data || [];
const { store } = this;
const context = this.context || this.table.$vnode.context;
return ( return (
<table <table
class="el-table__body" class="el-table__body"
@ -47,7 +49,7 @@ export default {
<tbody> <tbody>
{ {
data.reduce((acc, row) => { data.reduce((acc, row) => {
return acc.concat(this.wrappedRowRender(row, acc.length)); return acc.concat(this.wrappedRowRender(store, context, row, acc.length));
}, []) }, [])
} }
<el-tooltip effect={this.table.tooltipEffect} placement="top" ref="tooltip" content={this.tooltipContent}></el-tooltip> <el-tooltip effect={this.table.tooltipEffect} placement="top" ref="tooltip" content={this.tooltipContent}></el-tooltip>
@ -320,7 +322,7 @@ export default {
table.$emit(`row-${name}`, row, column, event); table.$emit(`row-${name}`, row, column, event);
}, },
rowRender(row, $index, treeRowData) { rowRender(store, context, row, $index, treeRowData) {
const { treeIndent, columns, firstDefaultColumnIndex } = this; const { treeIndent, columns, firstDefaultColumnIndex } = this;
const rowClasses = this.getRowClass(row, $index); const rowClasses = this.getRowClass(row, $index);
let display = true; let display = true;
@ -346,8 +348,8 @@ export default {
columns={columns} columns={columns}
row={row} row={row}
index={$index} index={$index}
store={this.store} store={store}
context={this.context || this.table.$vnode.context} context={context}
firstDefaultColumnIndex={firstDefaultColumnIndex} firstDefaultColumnIndex={firstDefaultColumnIndex}
treeRowData={treeRowData} treeRowData={treeRowData}
treeIndent={treeIndent} treeIndent={treeIndent}
@ -366,13 +368,12 @@ export default {
); );
}, },
wrappedRowRender(row, $index) { wrappedRowRender(store, context, row, $index) {
const store = this.store;
const { isRowExpanded, assertRowKey } = store; const { isRowExpanded, assertRowKey } = store;
const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states; const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states;
if (this.hasExpandColumn && isRowExpanded(row)) { if (this.hasExpandColumn && isRowExpanded(row)) {
const renderExpanded = this.table.renderExpanded; const renderExpanded = this.table.renderExpanded;
const tr = this.rowRender(row, $index); const tr = this.rowRender(store, context, row, $index);
if (!renderExpanded) { if (!renderExpanded) {
console.error('[Element Error]renderExpanded is required.'); console.error('[Element Error]renderExpanded is required.');
return tr; return tr;
@ -405,7 +406,7 @@ export default {
treeRowData.loading = cur.loading; treeRowData.loading = cur.loading;
} }
} }
const tmp = [this.rowRender(row, $index, treeRowData)]; const tmp = [this.rowRender(store, context, row, $index, treeRowData)];
// 渲染嵌套数据 // 渲染嵌套数据
if (cur) { if (cur) {
// currentRow 记录的是 index，所以还需主动增加 TreeTable 的 index // currentRow 记录的是 index，所以还需主动增加 TreeTable 的 index
@ -439,7 +440,7 @@ export default {
} }
} }
i++; i++;
tmp.push(this.rowRender(node, $index + i, innerTreeRowData)); tmp.push(this.rowRender(store, context, node, $index + i, innerTreeRowData));
if (cur) { if (cur) {
const nodes = lazyTreeNodeMap[childKey] || node[childrenColumnName]; const nodes = lazyTreeNodeMap[childKey] || node[childrenColumnName];
traverse(nodes, cur); traverse(nodes, cur);
@ -453,7 +454,7 @@ export default {
} }
return tmp; return tmp;
} else { } else {
return this.rowRender(row, $index); return this.rowRender(store, context, row, $index);
} }
} }
} }