Vue elementui表格

news2024/12/25 8:55:20

去除表头

                  <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%"
                    :cell-style="{ 'text-align': 'justify-all' }"
                    :show-header="false"
                  >
                  </el-table>

在这里插入图片描述

合并

<template>
  <div class="elife-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain size="mini" @click="handleAdd"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="timeRange" label="时间设置">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.timeRange }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="reality" label="测试1">
      </el-table-column>
      <el-table-column prop="result" label="测试2">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleEvaluate(scope.row)"
            >评估</el-button
          >
          <el-button size="mini" type="text" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="text" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "早餐运力配置",
          timeRange: "8:00-9:00",
          reality: 200,
          result: 100,
        },
        {
          name: "午餐运力配置",
          timeRange: "11:00-12:00",
          reality: 200,
          result: 100,
        },
        {
          name: "午餐运力配置",
          timeRange: "12:00-13:00",
          reality: 200,
          result: 100,
        },
        {
          name: "午餐运力配置",
          timeRange: "13:00-14:00",
          reality: 200,
          result: 100,
        },
        {
          name: "晚餐运力配置",
          timeRange: "17:30-18:00",
          reality: 200,
          result: 100,
        },
        {
          name: "晚餐运力配置",
          timeRange: "18:00-18:30",
          reality: 200,
          result: 100,
        },
        {
          name: "晚餐运力配置",
          timeRange: "19:00-19:30",
          reality: 200,
          result: 100,
        },
      ],
    };
  },
  methods: {
    // 新增按钮操作
    handleAdd() {},

    // 评估按钮操作
    handleEvaluate() {},

    // 编辑按钮操作
    handleEdit() {},

    // 删除按钮操作
    handleDelete() {},

    // 合并第1列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 获取当前单元格的值
        const currentValue = row[column.property];
        // 获取上一行相同列的值
        const preRow = this.tableData[rowIndex - 1];
        const preValue = preRow ? preRow[column.property] : null;
        // 如果当前值和上一行的值相同,则将当前单元格隐藏
        if (currentValue === preValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          // 否则计算当前单元格应该跨越多少行
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData.length; i++) {
            const nextRow = this.tableData[i];
            const nextValue = nextRow[column.property];
            if (nextValue === currentValue) {
              rowspan++;
            } else {
              break;
            }
          }
          return { rowspan, colspan: 1 };
        }
      }
    },
  },
};
</script>

在这里插入图片描述

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

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

相关文章

大模型LLM微调技术进展与热门方法汇总

大模型微调是机器学习中的一项重要技术&#xff0c;旨在帮助我们降低成本&#xff0c;进一步提高模型的性能。具体来说&#xff0c;大模型微调指的是在现有预训练模型的基础上&#xff0c;根据特定任务数据进行微调&#xff0c;以适应任务的特定需求&#xff0c;以便我们更好地…

偏微分方程算法之抛物型方程差分格式编程示例四(Richardson外推)

目录 一、研究问题 二、C++代码 三、结果分析 一、研究问题 已知其精确解为。分别取以下三种步长: ①

口罩佩戴智能监测摄像机

智能监测摄像机在现代城市安全管理中扮演着关键角色&#xff0c;尤其是像口罩佩戴智能监测摄像机这样的设备&#xff0c;其应用正在日益扩展&#xff0c;对于公共卫生和安全至关重要。 这类摄像机利用先进的图像识别技术&#xff0c;能够实时监测人群中是否佩戴口罩。通过高精度…

GIAOTracker——一个用于多类、多对象追踪的综合框架探索

介绍 论文地址&#xff1a;https://arxiv.org/pdf/2202.11983.pdf 这篇论文探讨了人工智能图像处理领域中一项非常直观且令人兴奋的任务——在原始视频数据中检测和追踪单个物体。在图像处理的人工智能应用中&#xff0c;图像分类、物体检测和语义分割等任务经常被提及&#…

【查缺补漏】python

python查缺补漏 底板除 还有一种除法是//&#xff0c;称为地板除&#xff0c;两个整数的除法仍然是整数&#xff1a; >>> 10 // 3 3你没有看错&#xff0c;整数的地板除//永远是整数&#xff0c;即使除不尽。要做精确的除法&#xff0c;使用/就可以。 因为//除法只…

什么是元数据管理?企业进行元数据管理可以满足什么目的?

元数据管理作为数据治理的重要组成部分&#xff0c;其作用日益凸显。元数据&#xff0c;即“关于数据的数据”&#xff0c;提供了对数据的描述、上下文和意义的详细信息&#xff0c;对于确保数据的准确性、一致性和可访问性至关重要。 有效的元数据管理能够帮助企业更好地理解…

ffmpeg的安装教程

1.官网下载ffmpeg 进入Download FFmpeg网址&#xff0c;点击下载windows版ffmpeg&#xff08;点击左下第一个绿色的行&#xff09; 在release builds第一个绿框里面选择一个版本下载。 2.配置 下载完成后解压该压缩包单击进入ffmpeg\bin&#xff0c;会出现如下界面&#xff1…

毕设有论文,有代码,以及开题报告, PPT,使用手册

包含以下项目 1.学生班级管理系统 摘 要。21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#xf…

MYSQL 四、mysql进阶 4(索引的数据结构)

一、为什么使用索引 以及 索引的优缺点 1.为什么使用索引 索引是存储引擎用于快速找到数据记录的一种数据结构&#xff0c;就好比一本教科书的目录部分&#xff0c;通过目录中找到对应文章的页码&#xff0c;便可快速定位到需要的文章。Mysql中也是一样的道理&#xff0c;进行数…

Unity【入门】光源、物理、音效系统

核心系统 文章目录 核心系统1、光源系统基础1、光源组件2、光面板相关 2、物理系统之碰撞检测1、刚体 RigidBody2、碰撞器 Collider3、物理材质4、碰撞检测函数5、刚体加力 3、音效系统1、音频文件导入2、音频源和音频监听器脚本3、代码控制音频源4、麦克风输入相关 1、光源系统…

34、shell数组+正则表达式

0、课前补充 jiafa () { result$(echo " $1 $2 " | bc ) print "%.2f\n" "$result" } ##保留小数点两位 薄弱加强点 a$(df -h | awk NR>1 {print $5} | tr -d %) echo "$a"一、数组 1.1、定义 数组的定义&am…

Visual Studio2022+cuda环境配置及代码调试

环境配置 下载并安装CUDA Toolkit 打开Visual Studio&#xff0c;新建项目。如下图所示&#xff0c;已经包含CUDA编程选项 代码调试 1、打开cu文件的属性页&#xff0c;按下图所示&#xff0c;将Host中的Generate Host Debug Information设置为“是" 2、不可勾选Nsight…

System.Dynamic.ExpandoObject的使用说明

官方文档 ExpandoObject 类 (System.Dynamic) | Microsoft Learn https://learn.microsoft.com/zh-cn/dotnet/api/system.dynamic.expandoobject?viewnet-8.0 System.Dynamic.ExpandoObject 类 - .NET | Microsoft Learn https://learn.microsoft.com/zh-cn/dotnet/fundame…

虚拟机安装JDK11操作教程

1、新建/usr/java目录 mkdir /usr/java 2、将jdk-11文件上传/usr/java目录 3、解压jdk-11文件 tar -zxvf jdk-11_linux-x64_bin.tar.gz 4、编辑配置文件&#xff0c;配置环境变量 vi /etc/profile 在打开的文件末尾添加 export JAVA_HOME/usr/java/jdk-11 export JRE_HOM…

接口自动化之参数快递的几种方式!

1. 直接在代码中硬编码 这是最简单直接的方式&#xff0c;直接在测试脚本中写入具体的参数值。但这种方法不灵活&#xff0c;难以维护&#xff0c;也不利于数据的复用。 def test_api_request(): response requests.get("http://example.com/api?paramvalue")…

一文读懂一致性Hash算法

Hash算法 哈希算法将任意长度的二进制值映射为较短的固定长度的二进制值,这个小的二进制值称为哈希值。哈希值是一段数据唯一且极其紧凑的数值表示形式。 Hash算法在安全加密领域MD5、SHA等加密算法,数据存储和查找的Hash表等方面均有应用。Hash表的数据查询效率极高,时间…

借助Aspose.Email,使用 C# .NET 创建 PST 文件并填充内容

PST&#xff08;个人存储表&#xff09;文件是管理 Outlook 数据的重要组成部分&#xff0c;方便存储电子邮件、联系人、日历和其他项目。在 C# .NET 开发领域&#xff0c;创建和管理存储文件的过程对于各种应用程序至关重要。 在本文中&#xff0c;我们将探讨如何使用 C# .NE…

江苏新世纪信息科技有限公司

NCT是国内专业从事信息化人才培训、咨询&#xff0c;以及企业级数字化培训平台建设&#xff0c;企业内训课程、课件制作&#xff1b;工业企业智能制造诊断和信息化规划服务&#xff1b;信息化建设项目的运维服务和解决方案为一体的标准应用服务商。NCT是中国ITSS实训基地的运营…

云专线组网方案的特性和实施要素

云专线组网方案是指企业通过专用的网络连接&#xff0c;将其内部网络与云服务商的数据中心直接相连&#xff0c;从而实现高速、安全、稳定的云资源访问。云专线通常提供比公共互联网更优的网络性能&#xff0c;包括更低的延迟、更高的带宽和更强的安全性。以下是云专线组网方案…

去中心化衍生品协议内卷,ZKX 能否通过差异化道路突出重围?

去中心化衍生品赛道目前从协议类型来看&#xff0c;主要有两种解决方案&#xff1a; 以 GMX 为代表的 Vault 模式&#xff0c;LP 作为交易者的对手盘&#xff0c;由 Orcale 喂价决定交易价格。 以 dYdX 为代表的订单薄模式&#xff0c;链下撮合链上结算。 这两种解决方案虽然…