vue3 elementplus table合并

news2024/9/28 15:26:01

在这里插入图片描述
table表格下方合并写法:
1:单行合并
(1)在标签中加入属性

   :summary-method="getSummaries"
            :show-summary="true"
 <el-table
            :data="data"
            id="tableRef"
            ref="tableRef"
            row-key="belnr"
            class="td-bacg-white"
            :summary-method="getSummaries"
            :show-summary="true"
          >
            <template v-for="(item1, index1) in tableColumns">
              <template v-if="item1.children">
                <el-table-column
                  :key="index1"
                  :label="item1.title"
                  align="center"
                >
                  <template v-for="item in item1.children">
                    <el-table-column
                      v-if="!item.hidden"
                      :align="item.align || 'center'"
                      :prop="item.dataIndex"
                      :label="item.title"
                      :min-width="item.width"
                      :key="item.dataIndex"
                      :show-overflow-tooltip="
                      item.overflow === false ? false : true
                    "
                    >
                      <template #default="scope">
   
              <template >
                <el-table-column
                  :align="item1.align || 'center'"
                  :key="index1"
                  :prop="item1.dataIndex"
                  :label="item1.title"
                  :fixed="item1.fixed || false"
                  :min-width="item1.width"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    <span
                      v-if="item1.filterType === 'toThousandFilter'"
                    >
                    {{
                        toThousandFilter(
                          Number(scope.row[`${item1.dataIndex}`] || 0)
                        )
                      }}
                  </span>
                  <span v-else-if="item1.dataIndex === 'ii'">
                      <span>{{ scope.row[`${item1.dataIndex}`] }}%</span>
                  </span>
                    <span v-else>
                    <span>{{ scope.row[`${item1.dataIndex}`] }}</span>
                  </span>
                  </template>
                </el-table-column>
              </template>
            </template>
          </el-table>

(2)合并方法
下方判断字段为 uu ii 的两个字段计算合并。

/**
 * 合计
 */
interface SummaryMethodProps<T = SpmxListType> {
  columns: TableColumnCtx<T>[];
  data: T[];
}
function getSummaries(param: SummaryMethodProps) {
  const { columns, data } = param;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    if (index === 1) {
      sums[index] = '合计';
      return;
    }
    if (
      column.property !== 'uu' &&
      column.property !== 'ii'
    ) {
      sums[index] = '';
      return;
    }
    const values = data.map(item => Number(item[column.property]));
    console.log(columns, '==columns');
    if (!values.every(value => isNaN(value))) {
      sums[index] = values
        .reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0)
        .toString();
      sums[index] = Number(sums[index]).toFixed(2);
      if (
        column.property === 'ii'
      ) {
        // 加百分号
        sums[index] = sums[index]+'%';
      }else{
        // 加千叶符
        sums[index] = toThousandFilter(Number(sums[index]));
      }
    } else {
      sums[index] = '';
    }
  });
  console.log(sums);
  return sums;
}



2.如果下方合并是两行的,用到Render函数。
(利用render函数插入2个div作为2行展示)


function getSummaries(param: SummaryMethodProps) {
  const { columns, data } = param;
  const sums: string[] = [];

  columns.forEach((column, index) => {
    if (index === 0) {
      // sums[index] = '小计 total';
      sums[index] =  h('div', {class: ''},[
        h("div", '小计 total', ),
        h("div", '% of total', ),
      ]);
      // sums[index] =  <div>
      //     <div>合计</div>
      //   <div> 备注</div>
      //   </div>;
      return;
    }
    if (index === 1) {
      // sums[index] = '小计 total';
      sums[index] =  h('div', {class: ''},[
        h("div", '1234567', ),
        h("br", '', ),
      ]);
      return;
    }   if (index === 2) {
      // sums[index] = '小计 total';
      sums[index] =  h('div', {class: ''},[
        h("div", '100%', ),
        h("div", '12%', ),
      ]);
      return;
    }
    if (index === 3) {
      // sums[index] = '小计 total';
      sums[index] =  h('div', {class: ''},[
        h("div", '1234567', ),
        h("br", '', ),
      ]);
      return;
    }
    if (index === 4) {
      // sums[index] = '小计 total';
      sums[index] =  h('div', {class: ''},[
        h("div", '100%', ),
        h("div", '88%', ),
      ]);
      return;
    }
    if (
      column.property !== 'ee' &&
      column.property !== 'rr'
    ) {
      sums[index] = '';
      return;
    }

  });
  console.log(sums);

  return sums;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/695493.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CentOS Stream 10 计划已启动,即将进入初始化阶段

导读 但初始化的 CentOS Stream 10 暂时不会对外开放&#xff0c;也不会有太多活跃信息。从 Fedora 周期的规律来看&#xff0c;至少还有六个月的时间&#xff0c;CentOS Stream 10 才会正式启动开发流程&#xff0c;接受来自外部的贡献。周五的公告指出&#xff1a;你会看到 C…

智能优化算法改进策略之局部搜索算子(二)—模式搜索(以正余弦算法和灰狼算法为研究对象)

一、改进点基本介绍&#xff1a; 在目前多数的改进智能优化算法文献中&#xff0c;局部搜索算子的形式多种多样。它们主要被用来增强算法的局部开发能力&#xff0c;进而提升它们在优化问题特别在单峰问题上的收敛性能。作为一种高效的直接搜索法&#xff0c;模式搜索目前已被…

freemarker 使用word模板赋值

1. 引包<dependency><groupId>org.freemarker</groupId><artifactId>freemarker</artifactId><version>2.3.28</version></dependency>word文档工具类import freemarker.template.Configuration; import freemarker.template.…

将List转化为String 以逗号隔开

一.前言 在我们日常开发中, 在前后端交互的时候 , 会遇到多个id或其他字段存放到一个字段中, 这时我们会遇到一个List(集合)---->String(单个字段), 这时我们要进行操作数据, 使得我们的数据可以保存到数据库中 . 二.解决方法 2.1 利用StringBurilder或StringBuffer pub…

【git】idea怎么去替换git的地址

git 打开git地址添加或者修改git地址 打开git地址 右击->git->repository->remotes 添加或者修改git地址

​BCC Art Looks:BCC+Color Infrared

BCCColor Infrared 彩色红外 Effect Presets & Docs 效果预设和文档 Mocha Mask and Track Mocha 蒙版和跟踪 Mocha Mask... Mocha 蒙版... Pixel Chooser / Mocha 像素选择器 / Mocha PixelChooser - 像素选择器 View Mask / Matte - 查看蒙版/遮罩 Intensity - 强度 Ma…

java基础(并发编程)-线程状态转换

一、线程的状态 情况1 情况2 情况3 情况4 情况5 情况6 情况7 情况8 情况9 RUNNABLE <-->BLOCKED t 线程用synchronized(obj)获取了对象锁时如果竞争CPU时间片失败&#xff0c;线程的状态从RUNNABLE -->BLOCKED持obj锁线程的同步代码块执行完毕&#xff0c;会…

系统架构设计师考试备考精简版(23年)!

关于23年新教材 2023 年系统架构设计师教材已经更新到第二版&#xff0c;新教材移除了 UML 和 设计模式章节&#xff0c;加入了架构设计理论与实践部分&#xff0c;对于大家来说好消息是 UML 和设计模式不用再去看了。坏消息是案例、论文难度应该会加大。这是因为新版本下篇加…

2023年黑马重磅推出接口自动化测试项目

随着测试行业的蓬勃发展&#xff0c;对从业者的要求越来越高&#xff0c;自动化测试已经成为软件测试中一个重要组成部分&#xff0c;广泛应用于各行各业。甚至&#xff0c;在圈子中还流传着这样一句话&#xff1a;学好测试自动化&#xff0c;年薪30万不在话下&#xff01; 今…

【重试】Java 中的 7 种重试机制

随着互联网的发展项目中的业务功能越来越复杂&#xff0c;有一些基础服务我们不可避免的会去调用一些第三方的接口或者公司内其他项目中提供的服务&#xff0c;但是远程服务的健壮性和网络稳定性都是不可控因素。在测试阶段可能没有什么异常情况&#xff0c;但上线后可能会出现…

漏洞分析|死磕Jenkins漏洞回显与利用效果

0x01 背景 近期我们发起了一个Goby漏洞挑战赛的活动&#xff0c;在活动期间收到了大量的反馈信息&#xff0c;延伸出一系列在编写POC漏洞检测与利用中考虑场景不全的问题&#xff0c;我们针对发现的各种场景用市面上常见的工具进行了一些列的对比工作&#xff0c;发现市面上工…

前端-vue-对打包的静态文件进行压缩

通过 npm run build 打包时候&#xff0c;会发现静态文件很大&#xff0c;放在nginx服务中访问页面会很慢&#xff0c;所以可在打包过程中对静态文件再压缩。 对js、css、html等文件进行压缩&#xff1a; 安装插件 “compression-webpack-plugin” 。(我本地版本&#xff1a;…

leecode-字符串解码-栈

题目 题目链接 分析 用两个栈存储数字、字符串的情况 如果遇到[&#xff0c;就入栈&#xff0c;遇到]就按照数字把字符串出栈&#xff0c;并构造出新的字符串赋给res。 一步步内部解码。 代码 class Solution { public:string decodeString(string s) {stack<int> …

【自监督论文阅读 4】BYOL

文章目录 一、摘要二、引言三、相关工作四、方法4.1 BYOL的描述4.2 Intuitions on BYOL’s behavior&#xff08;BYOL行为的直觉&#xff09;4.3 实验细节 五、实验评估5.1 Linear evaluation on ImageNet&#xff08;ImageNet上的线性评估&#xff09;5.2 Semi-supervised tra…

宝塔面板 - 如何通过宝塔面板设置服务器禁止 Ping?

问题描述 在介绍如何通过宝塔面板设置服务器禁止ping之前&#xff0c;我们先来简单了解一下什么是ping。 Ping 可用于测试网络上IP系统的可用性&#xff0c;也可用于通过监控往返时间和数据包丢失&#xff0c;来测试网络连接的质量。ping 也可以用于识别网络子网&#xff0c;…

数字孪生和GIS结合将为智慧园区带来什么样的改变?

数字孪生和地理信息系统&#xff08;GIS&#xff09;是当今智慧园区发展中的两个重要技术&#xff0c;它们的结合将为智慧园区带来根本性的改变和巨大的发展机遇。这种结合将深刻影响园区的规划、建设、运营和管理&#xff0c;为人们创造更智能、高效、可持续的生活环境。 首先…

真的不想知道文字转语音真人发声免费有哪些软件吗

曾经有一个盲人作家&#xff0c;他热爱写作却无法看到自己的文字成品。直到有一天&#xff0c;他听说了一款文字转语音的软件&#xff0c;可以将他的文字转化为声音&#xff0c;让他能够听到自己的作品。这则故事令我们体会到文字转语音这项技术的重要性。那么&#xff0c;你知…

【⑤MySQL函数】:让你的数据库操作更高效(二)

前言 ✨欢迎来到小K的MySQL专栏&#xff0c;本节将为大家带来MySQL日期时间、条件判断、系统信息、加密、进制转换和IP地址转换函数的讲解✨ 目录 前言一、日期和时间函数二、条件判断函数三、系统信息函数四、加密函数五、进制转换函数六、IP地址转换函数七、总结 一、日期和时…

韦纳VeighNa(VNPY)新手入门到写策略

韦纳VeighNa&#xff08;VNPY&#xff09;新手入门到写策略 1.VeighNa终端如何登录交易&#xff1f;勾选好相应接口和功能启动后在哪输入账号&#xff1f;2.在哪开发策略&#xff1f;策略文件夹在哪&#xff1f;3.如何写策略&#xff1f;如何开发策略&#xff1f;4.有策略模板吗…

离线语音识别芯片IC方案,打造智能眼部按摩仪WTK6900H-C-24SS

随着科技的不断进步&#xff0c;智能化产品已经成为人们日常生活中的一部分。眼部按摩仪作为舒缓眼部疲劳的利器&#xff0c;如今更是加入了离线语音识别芯片IC方案&#xff0c;让使用体验更加智能化、便捷化&#xff0c;WTK6900H-C-24SS离线语音识别芯片IC方案&#xff0c;将为…