1. el-table を使用してツリー データの遅延ロードを実装する
- 前提条件を達成する:
-
- 怠惰
-
- :load=“ロードノード”
-
- :tree-props=“{ Children: 'children', hasChildren: 'hasChildren' }”
注: 特に項目 3 については、バックエンド インターフェイスを「hasChildren」に渡す必要があります (名前は異なる場合があります)。値は true または false です。ルート ノードの値が true の場合、子ノードの値は false、それ以外の場合は、データの横にある小さな三角形は表示されません。つまり、子ノードのデータが取得できません。
- 実装コードは次のとおりです。
<el-table
lazy
:load="loadNode"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
// 点击小三角执行的方法
const loadNode = (row: {
[key: string]: any }, treeNode: any, resolve: any) => {
if (row.level >= 1) {
state.tableData.param.level = row.level + 1; //后端要求传参变化
state.tableData.param.code = row.code;
Query(state.tableData.param).then((response: Array<{
[key: string]: any }>) => {
resolve(response);
});
}
};
>
2. 行をクリックして展開します。
- データを展開するには、現在の行をクリックする必要があります (その前に、小さな三角形をクリックして展開します)
- コードは以下のように表示されます。
// 使用点击事件
@row-click="getOpenDetail"
// 点击当前行展开节点
const getOpenDetail = (row: any, column: any, e: any) => {
if (e.currentTarget.firstElementChild.firstElementChild.firstElementChild.tagName == 'DIV') {
e.currentTarget.firstElementChild.firstElementChild.firstElementChild.click();
} else {
e.currentTarget.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.click();
}
};
3. 一度に表示されるデータは 1 つだけです
- ルート ノードをクリックする必要がある場合、他のルート ノードは展開されず、現在のルート ノードとそれに対応する子ノードのみが展開されます。
- コードは以下のように表示されます。
// 需要用到以下代码，其中 code 为数据唯一标识，与 id 作用一样
row-key="code"
:expand-row-keys="expands"
@expand-change="expandSelect"
// 每次只展开一行
const expandSelect = (row: {
[key: string]: any }, expanded: boolean) => {
if (expanded) {
expands.value = [];
if (row) {
expands.value.push(row.code, row.code.substring(0, 2), row.code.substring(0, 4), row.code.substring(0, 6)); // 每次push进去的是每行的code和父元素的code
}
} else {
expands.value = []; // 默认不展开
}
};
- バックグラウンドデータは次のとおりです。
ルートノードのデータはコードの最初の2桁であり、後続の子ノードのデータは2桁ずつ追加されます
4.カスタムテーブルの合計値
- テーブルの最終行のデータの合計値を表示する必要がある 遅延ロードデータのため、自動的に合計値を集計して表示することはできない フロントエンドが自ら値を代入する必要がある
- コードは以下のように表示されます。
show-summary
:summary-method="getSummaries"
// 自定义表尾合计行
const getSummaries = (param: any) => {
const {
columns, data } = param;
const sums: string[] = [];
columns.forEach((column: any, index: number) => {
switch (index) {
case 0:
sums[index] = '合 计';
break;
case 2:
sums[index] = state.array.allDutyCost;// state.array.allDutyCos 为后端返回已经计算好的总数值
break;
case 3:
sums[index] = state.array.allBudgetCost;
break;
case 4:
sums[index] = state.array.allAdjustCost;
break;
default:
sums[index] = '——';
}
});
本文に間違いやわからないことがあれば、メッセージを残して一緒に相談することもできます！