VUE Table 尾行进行合计处理,并进行合并列处理

需求效果图如下:

实现代码:

  <el-form
        ref="edit"
        label-position="right"
        :model="form"
        :rules="rules"
        size="small"
      >
        <div id="tableData">
          <el-table
            id="table"
            :key="Math.random()"
            ref="tableSort"
            v-loading="listLoading"
            border
            :data="form.weaveList"
            :header-cell-style="{ 'text-align': 'center' }"
            row-key="weaveId"
            show-summary
            size="mini"
            :span-method="objectSpanMethod"
            :summary-method="getSummaries"
          >
            <el-table-column
              :label="translate('product.weave.standards')"
              min-width="120"
            >
              <el-table-column
                align="center"
                :label="translate('product.weave.project')"
                min-width="120"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'weaveList.' + scope.$index + '.weaveName'"
    
### vxe-table 尾行数据显示错误解决方案 当遇到 `vxe-table` 的尾行数据显示不正确的问题时,可以考虑以下几个方面来排查并解决问题。 #### 1. 检查数据源配置 确保传递给表格的数据结构是正确的。如果使用的是分页或其他复杂的数据处理逻辑,则需特别注意数据的一致性和完整性[^1]。 ```javascript // 示例:验证数据格式是否正确 const tableData = [ { name: 'John', age: 28 }, { name: 'Jane', age: 25 } ]; ``` #### 2. 配置 footer-method 正确返回合计值 通过设置 `footer-method` 方法来自定义计算每的汇总值,并确保该方法能够正确地处理所有可能的情况,包括但不限于空值、不同类型字段等特殊场景。 ```javascript // 自定义 footerMethod 来生成表尾内容 footerMethod({ columns, data }) { return [{ name: '总计', age: data.reduce((sum, item) => sum + (item.age || 0), 0), }]; } ``` #### 3. 使用 span-method 合并单元格 对于需要合并特定区域内的多个单元格情况(如题目提到的第一二),可以通过指定 `span-method` 属性来进行跨行的操作。需要注意的是,在此过程中要保证索引位置以及范围设定无误。 ```vue <template> <vxe-table :data="tableData" :footer-method="footerMethod"> <!-- 定义 --> <vxe-column field="name" title="姓名"></vxe-column> <vxe-column field="age" title="年龄"></vxe-column> <!-- 设置合并策略 --> <template slot-scope="{ row }" #default> <div :class="[row._index === 0 ? 'merged-cell' : '']">{{ row.name }}</div> </template> <template #footer> <tr> <td colspan="2">这里是自定义HTML</td> </tr> </template> </vxe-table> </template> <script setup lang="ts"> import { ref } from "vue"; defineProps<{ msg: string; }>(); const tableData = ref([ { id: 1, name: "张三", sex: "男", age: 27 }, { id: 2, name: "李四", sex: "女", age: 29 } ]); function footerMethod() { return [[{ name: "统计:", age: "总人数:" + tableData.value.length }]]; } </script> <style scoped> .merged-cell { /* 样式 */ } </style> ``` 上述代码展示了如何利用 Vue 组件语法糖简化模板编写过程的同时实现了对首两表头进行合并操作;另外还提供了简单的样式类用于区分被合并后的视觉效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值