element 树型结构表格的合并问题

最新推荐文章于 2024-08-13 23:10:15 发布

哆啦A敏

最新推荐文章于 2024-08-13 23:10:15 发布

阅读量1.5k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_41442428/article/details/115133255

版权

本文介绍了在Element UI中实现树形结构表格的合并方法，包括总价单元格的合并、禁用树型表格收缩功能以及处理子级层级不确定的合并策略。通过使用show-summary属性和refs获取表格元素，以及利用递归处理复杂树型结构。

摘要由CSDN通过智能技术生成

在这里插入图片描述
完成以上的树型结果的表格，需要掌握以下几点。
首先，我们先看比较简单，总价单元格的合并的问题，这里总价是合并了两列。
他实际上其实就是用到element 中的show-summary 同时定义了table中的refs

在这里插入图片描述
实际上就是获取到了表格的元素，然后获取到table底部，进行合并。
其实，我们要做的第二个比较简单，就是如何让树型表格禁用收缩功能，element自带的方法，让他每一次点击都处于展开的状态

最后，就是树型合并的问题，子级的层级不确定数，所以我们需要用到递归的方法

<!-- 公共S树型表格 -->
<template>
  <el-table class="control-table tree-table treeTableCommon" ref="mytable" :indent='indent' show-summary highlight-current-row :class="[isShow[tableIndex]?'':'table-hidden']" @expand-change="expandChange($event,tableIndex)" :summary-method="getSummaries" :data="tableData" style="width: 100%;" row-key="id" border :span-method="objectSpanMethod" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" @row-click='onRowClick'>
    <el-table-column type="index" label="序号" width="50" align="center">
      <template slot-scope="scope">
        <div class="table-index">{
   {
   scope.row.mytyindex}}</div>
      </template>
    </el-table-column>
    <el-table-column v-for="(val,index) in tableHeader" :key="index" :prop="val.name" :label="val.displayName" align="center">
    </el-table-column>
  </el-table>
</template>
<script>
import _ from 'lodash'
export default {
   
  name: 'TreeTableCommon',
  components: {
   },
  directives: