完成以上的树型结果的表格,需要掌握以下几点。 首先,我们先看比较简单,总价单元格的合并的问题,这里总价是合并了两列。 他实际上其实就是用到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: {