位置: IT常识 - 正文

使用 el-table 实现树形数据懒加载、点击行展开、每次只展示一条数据（大类）以及自定义表格合计值(el-table-column formatter)

编辑：rootadmin

使用 el-table 实现树形数据懒加载、点击行展开、每次只展示一条数据（大类）以及自定义表格合计值 1. 使用 el-table 实现树形数据懒加载实现必需条件：lazy:load=“loadNode”:tree-props=“{ children: ‘children’, hasChildren: ‘hasChildren’ }”

推荐整理分享使用 el-table 实现树形数据懒加载、点击行展开、每次只展示一条数据（大类）以及自定义表格合计值(el-table-column formatter)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:el-table key,el-table append,el-table-column formatter,el-table-column formatter,el-table-column scope,el-table-column scope,el-table-column formatter,el-table ref,内容如对您有帮助，希望把文章链接给更多的朋友！

注意：特别是第3条，后端接口必须传给你"hasChildren"(名字可以不一样)，值为 true或false，如果是根节点值为true，子节点值为false，不然数据旁边的小三角不会显示，即不能获取子节点数据

实现代码如下：<el-tablelazy: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. 每次只展示一条数据要求点击根节点时，其余根结点不展开，只展开当前根节点及其对应的子节点代码如下：// 需要用到以下代码，其中 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 = []; // 默认不展开}};后台数据如下：

根节点数据为code前两位数，以后的子节点数据依次加两位数

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] = '——';}});