vex-table根据时间加载列(动态加载),动态计算显示最后一行

news2024/11/23 13:18:42

vex-table根据时间加载列(动态加载),动态计算显示最后一行

效果

在这里插入图片描述

div部分

 <vxe-table
        ref="xTable"
        border
        show-footer
        show-overflow
        :loading="loading"
        :data="partData"
        :column-config="{ resizable: false }"
        :edit-config="{ showIcon: false, trigger: 'click', mode: 'cell' }"
        :footer-method="footerMethod"
        :row-config="{ isHover: true }"
        :export-config="{}"
        class="editable-footer"
      >
        <vxe-column type="seq" title="序号" width="50" fixed="left"></vxe-column>
        <vxe-column field="partname" title="部件名称" width="200" fixed="left">
          <template #edit="{ row }">
            <vxe-input v-model="row.partname" type="number" placeholder="请输入数值"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="detailqty" title="零件数" width="100" fixed="left">
          <template #edit="{ row }">
            <vxe-input v-model="row.detailqty" type="number" placeholder="请输入数值"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-for="item in columnList" :key="item.field" :field="item.field" :title="item.title" :edit-render="{}" min-width="100">
          <template #edit="{ row }">
            <vxe-input v-model="row[item.field]" type="number" placeholder="请输入"></vxe-input>
          </template>
        </vxe-column>
      </vxe-table>

TS部分

<script lang="ts">
import { defineComponent, reactive } from "vue";
export default defineComponent({
  setup() {
    return reactive({
      visible: false as boolean,
      loading: false as boolean,
      proPlan: {
        dateValue: [] as any
      } as any,
      columnList: [] as any,
      partData: [] as any,
    });
  },
  computed: {
    dataRule() {
      return {};
    }
  },
  methods: {
    footerMethod({ columns, data }: any) {
      return [
        columns.map((column: { property: string }, columnIndex: number) => {
          if (columnIndex === 0) {
            return "";
          }
          if (columnIndex === 1) {
            return "汇总";
          }
          if (!["partname"].includes(column.property)) {
            return this.sumNum(data, column.property);
          }
          return null;
        }),
        columns.map((column: { property: string }, columnIndex: number) => {
          if (columnIndex === 0) {
            return "";
          }
          if (columnIndex === 1) {
            return "人数";
          }
          if (!["partname"].includes(column.property)) {
            if (this.capDate.length > 0) {
              for (let i = 0; i < this.capDate.length; i++) {
                if (this.capDate[i].date.includes(column.property)) {
                  return this.sumPerson(data, column.property, Number(this.capDate[i].number));
                }
              }
            }
          }
          return null;
        })
      ];
    },
    sumNum(list: { [x: string]: any }[], field: string | number) {
      let count = 0;
      list.forEach((item: { [x: string]: any }) => {
        if (item[field]) {
          count += Number(item[field]);
        }
      });
      return count;
    },
    sumPerson(list: { [x: string]: any }[], field: string | number, num: number) {
      let count = 0;
      list.forEach((item: { [x: string]: any }) => {
        if (item[field]) {
          count += Number(item[field]);
        }
      });
      return Math.ceil(count / num);
    },
    /**
     * 根据时间加载列
     * @param val
     */
    changeDate(val: any) {
      this.getCapDate(val);
    },
    InitColumns(val: any) {
      let all = this.getAll(val[0], val[1]);
      this.columnList = reactive([]);
      for (let i = 0; i < all.length; i++) {
        let column = reactive({
          field: all[i],
          title: all[i]
        });
        this.columnList.push(column);
      }
      //排序
      this.columnList.sort(function (A: number, B: number) {
        return A - B;
      });
    },
    //根据时间加载 每一天时间
    getAll(start: any, end: any) {
      let dateList = [];
      let startTime = this.getDate(start);
      let endTime = this.getDate(end);

      while (endTime.getTime() - startTime.getTime() >= 0) {
        let year = startTime.getFullYear();
        let month = startTime.getMonth() + 1 < 10 ? "0" + (startTime.getMonth() + 1) : startTime.getMonth() + 1;
        let day = startTime.getDate().toString().length == 1 ? "0" + startTime.getDate() : startTime.getDate();
        dateList.push(year + "-" + month + "-" + day);
        startTime.setDate(startTime.getDate() + 1);
      }
      return dateList;
    },
    /**
     * 时间格式处理 2022-11-11
     * @param datestr
     */
    getDate(datestr: any) {
      let temp = datestr.split("-");
      let date = new Date(temp[0], temp[1] - 1, temp[2]);
      return date;
    },
  });  
</script>

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

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

相关文章

【信息检索与数据挖掘期末笔记】(四)概率检索模型

为什么需要概率检索 给一个用户需求和一个文档集&#xff0c;一个检索系统需要决定文档有多满足查询 IR 系统难以理解一个查询背后的信息需求&#xff0c;并且对文档满足查询的程度做了非确定性推测 概率论可以为这种非确定性推理提供一个基本的理论 概率模型利用这个基础来估…

关于PCB布局布线,这篇文章说透了

关于PCB布局布线的问题&#xff0c;今天我们不讲信号完整性分析&#xff08;SI&#xff09;、电磁兼容性分析&#xff08;EMC&#xff09;、电源完整性分析&#xff08;PI&#xff09;。 只讲可制造性分析&#xff08;DFM) &#xff0c;可制造性设计不合理同样会导致产品设计失…

2022年12月 Faster RCNN训练自己的数据集 配置环境相对简洁

以往的大多数教程都是数年前的Faster RCNN源码&#xff0c;因为旧环境和现有环境的不同&#xff0c;导致环境配置方面出现一系列问题。特别是利用setup.py或者make.sh配置所需的环境时&#xff0c;遇到并解决一个又一个的问题&#xff0c;遗憾的是&#xff0c;失败总是贯彻全局…

嗦嗦postMessage和webSocket

前端监控 本文将从前端监控要做的3件事讲起&#xff0c;以及看看github上的web-tracing插件是怎么做的&#xff0c;尽可能展开里面关于用户体验的知识点。主要有以下几点&#xff1a; 行为监控错误收集性能监控### 行为监控 行为监控就是页面上加装摄像头&#xff0c;把我们…

基于PHP+MySQL大学宿舍管理系统的设计与实现

高等学校的住宿宿舍是住宿的第二个家,是住宿进行学习与工作的重要场地。其管理水平的高低将直接影响着住宿人才培养的质量和住宿素质教育的成效。为住宿提供一个良好的管理体系,对学校和住宿而言至关重要,因此高校公寓的建设与发展,直接影响着学校后勤社会化改革的发展进程,也直…

有趣且重要的JS知识合集(17)矩形框交互算法

之前我讲过如何用js绘制矩形框&#xff0c;下面链接快速通道~ 【JS】原生js实现矩形框的绘制/拖动/缩放 那么如何判断多个矩形框是否相交&#xff1f;嵌套还是其他的呢&#xff1f; 那下面我来分别写写关于矩形框常用的几个算法吧 1、数据格式知悉 const { startX, startY…

网页整体如何实现网页变灰效果

网页整体如何变灰?为了纪念一些影响力很大的伟人逝世或者重要的纪念日的时候需要让网页全部变灰来表示我们对逝者的悼念。 其实这个功能很简单&#xff0c;方法也有很多&#xff0c;只需要在HTML 的head标签里加入如下代码即可! <style type"text/css">html …

Vulnhub_CTF-4

目录 一 渗透测试 &#xff08;一&#xff09;信息收集 1 端口扫描 2 目录枚举 &#xff08;二&#xff09;漏洞测试 1 SQL注入 2 ssh爆破 &#xff08;三&#xff09;提权 1 sudo 提权 二 知识点 &#xff08;一&#xff09;SQL延时注入 &#xff08;二…

Vue3聊天气泡简单实现思路

Vue3聊天气泡简单实现 实现聊天气泡主要有两个注意点&#xff1a; ①是根据字体数量自适应框的长度 ②字体到框有边距&#xff0c;也就是为了美观 这篇博客主要讲实现的思路&#xff0c;不讲聊天气泡的三角突出点&#xff0c;如下所示&#xff1a; 三角突出点通过简单的bord…

微服务框架 SpringCloud微服务架构 9 初识 Docker 9.1 什么是Docker

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 SpringCloud微服务架构 文章目录微服务框架SpringCloud微服务架构9 初识 Docker9.1 什么是Docker9.1.1 项目部署的问题9.1.2 Docker9.1.3 总…

StarkNet新手指南

Rollup代表了以太坊未来扩展计划的基础。 StarkNet是一个无需许可的第2层&#xff08;L2&#xff09;扩展网络&#xff0c;是“四大”早期主流rollup之一。本篇Bankless文章将向你展示&#xff0c;对于一个新手来说&#xff0c;如何畅游StarkNet生态系统&#xff01; StarkNe…

【JUC】循环屏障CyclicBarrier详解

前言 jdk中提供了许多的并发工具类&#xff0c;大家可能比较熟悉的有CountDownLatch&#xff0c;主要用来阻塞一个线程运行&#xff0c;直到其他线程运行完毕。而jdk还有一个功能类似并发工具类CyclicBarrier&#xff0c;你知道它的作用吗&#xff1f;和CountDownLatch有什么区…

QA特辑|重点重点!模型开发与部署的标准答案!

11月24日&#xff0c;顶象业务安全大讲堂系列课程之《智能模型平台》正式开讲&#xff0c;顶象人工智能总监无常从从模型平台的现状与需求出发&#xff0c;带大家了解了模型平台的开发环境与部署环境&#xff0c;并且就顶象的Xintell 模型平台 为大家做了演示。 直播也吸引了不…

【LeetCode每日一题】——38.外观数列

文章目录一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【解题思路】七【题目提示】八【时间频度】九【代码实现】十【提交结果】一【题目类别】 字符串 二【题目难度】 中等 三【题目编号】 38.外观数列 四【题目描述】 给定一个正整数 n …

mybatispuls 批处理 rewriteBatchedStatements=true

mybatis-plus原生的批处理 this.saveBatch(list); 实际是一条条处理&#xff0c;特慢&#xff0c;造几万行数据得几分钟以上。 如果加上配置&#xff0c;就十几秒搞定五万行数据入库 &rewriteBatchedStatementstrue

建议收藏——等级保护备案整体流程

等级保护的流程大致为定级—备案—初测—整改—复测—监督检查&#xff0c;备案需先定级。整体备案流程是向属地公安机关提交备案资料&#xff0c;需要先线上提交备案材料。线上审核通过后&#xff0c;再线下提交备案材料。具体如下&#xff1a; 1&#xff0c;先线上提交资料审…

WPF 3D MeshGeometry3D类的Positions和TriangleIndices属性研究

MeshGeometry3D 类&#xff0c;用于生成三维形状的三角形基元&#xff1b; 类的参考在此&#xff1b; https://learn.microsoft.com/zh-cn/dotnet/api/system.windows.media.media3d.meshgeometry3d?viewwindowsdesktop-7.0 写在xaml语法里面是<MeshGeometry3D Positions.…

【Android App】低功耗蓝牙中扫描BLE设备的讲解及实战(附源码和演示 超详细)

需要源码请点赞关注收藏后评论区留言私信~~~ 一、扫描BLE设备 传统蓝牙虽然历史悠久&#xff0c;但它的缺陷也很明显&#xff0c;包括但不限于下列几点&#xff1a; &#xff08;1&#xff09;需要两部设备配对之后才能继续连接&#xff0c;而且连接速度也慢&#xff1b; &a…

数组与字符串总结

一、数组 基本概念 特点&#xff1a;顺序存储&#xff0c;每个元素大小&#xff0c;类型相同&#xff0c;元素有限 高维数组可以转化为一维数组 高维数组存放次序&#xff1a;按行优先或者按列优先 按行优先的寻址公式&#xff1a; 二维数组a[m] [n]: Loc(a[i] [j]) Loc…

Ajax axios JSON Fastjson

1、概述 AJAX (Asynchronous JavaScript And XML) &#xff1a;异步的JavaScript和XML AJAX工作流程如下: 1.1、作用 AJAX作用有以下两方面&#xff1a; 1&#xff09;与服务器进行数据交换&#xff1a;通过AJAX可以给服务器发送请求&#xff0c;服务器将数据直接响应回浏览…