Vue elementui表格

去除表头

                  <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.mfbz.cn/a/736282.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【前端vue3】TypeScrip-Class类用法

类型声明 TypeScrip定义Class类 语法&#xff1a; // 定义一个名为 Person 的类 class Person {constructor () {// 构造函数&#xff1a;稍后定义}run () {// 方法&#xff1a;稍后定义} }在TypeScript是不允许直接在constructor 定义变量的 需要在constructor上面先声明 例…

AI 大模型企业应用实战(06)-初识LangChain

LLM大模型与AI应用的粘合剂。 1 langchain是什么以及发展过程 LangChain是一个开源框架&#xff0c;旨在简化使用大型语言模型构建端到端应用程序的过程&#xff0c;也是ReAct(reasonact)论文的落地实现。 2022年10月25日开源 54K star 种子轮一周1000万美金&#xff0c;A轮2…

【学习笔记】Mybatis-Plus(三):MP中Wrapper的使用

Wrapper简介 注意&#xff1a; 查询用QueryWrapper和LambdaQueryWrapper来封装 updateWrapper和LambdaUPdateWrapper不但能封装查询还能更改要更新的对象。 QueryWrapper的使用 QueryWrapper中的很多条件限定都是见名知其意的。下表列出来几个常用的&#xff1a; 1.多条件进行…

拖拽劫持与数据窃取

2010 年&#xff0c;ClickJacking 技术有了新的发展。一位名叫 Paul Stone 的安全研究者在 BlackHat 2010 大会上发表了题为“Next Generation Clickjacking”的演讲。在该演讲中&#xff0c;提出了“浏览器 拖拽事件”导致的一些安全问题。 目前很多浏览器都开始支持 Drag &a…

智能风控(原理、算法与工程实践)项目一

本文介绍该书第一章的项目&#xff1a;运用CART树进行规则挖掘&#xff0c;具体代码如下 #!/usr/bin/env python # coding: utf-8 # In[1]: import pandas as pd import numpy as np import os # In[2]: data pd.read_excel( ./data_for_tree.xlsx) # In[3]: data.h…

(南京观海微电子)——TFT LCD压合技术

TFT-LCD TFT-LCD open cell后段制程主要指的是将驱动IC和PCB压合至液晶板上&#xff0c;这个制程主要由三个步骤组成&#xff1a; 1.ACF (Anisotropic Conductive Film)的涂布。 在液晶板需要压合驱动IC的地方涂布ACF&#xff0c;ACF又称异方性导电胶膜&#xff0c;特点是上下…

编程精粹—— Microsoft 编写优质无错 C 程序秘诀 07:编码中的假象

这是一本老书&#xff0c;作者 Steve Maguire 在微软工作期间写了这本书&#xff0c;英文版于 1993 年发布。2013 年推出了 20 周年纪念第二版。我们看到的标题是中译版名字&#xff0c;英文版的名字是《Writing Clean Code ─── Microsoft’s Techniques for Developing》&a…

Spring Boot + WebSocket 实现 IM 即时通讯

文章目录 1. 项目环境准备2. 配置WebSocket3. 创建消息处理器4. 创建消息类5. 创建前端页面6. 启动应用并测试7. 分析与扩展结论 &#x1f389;欢迎来到SpringBoot框架学习专栏~ ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT陈寒的博客&#x1f388;…

项目训练营第四天

项目训练营第四天 前端部分修改 前端用的是WebStorm和Ant Design Pro框架 Ant Design Pro是比较流行的一个前端登陆、注册、管理框架&#xff0c;能帮我们快速实现前端界面的开发 效果大致如图 使用起来也极为方便&#xff0c;首先在WebStorm 控制台中输入如下命令 # 使用…

Repair LED lights

Repair LED lights 修理LED灯&#xff0c;现在基本用灯带&#xff0c;就是小型LED灯串联一起的 1&#xff09;拆旧灯条&#xff0c;这个旧的是用螺丝拧的产品 电闸关掉。 2&#xff09;五金店买一个&#xff0c;这种是磁铁吸附的产品 现在好多都是铝线啊。。。 小部件&#x…

塞贝壳效应

塞贝克效应&#xff08;Seebeck effect&#xff09;&#xff0c;通常被称为第一热电效应&#xff0c;是由托马斯约翰塞贝克&#xff08;Thomas Johann Seebeck&#xff09;在1821年发现的一种热电现象。这个效应描述了当两种不同的导体或半导体在它们的接点处有温度差时&#x…

6月21日训练 (东北林业大学)(个人题解)

前言&#xff1a; 这次训练是大一大二一起参加的训练&#xff0c;总体来说难度是有的&#xff0c;我和队友在比赛时间内就写出了四道题&#xff0c;之后陆陆续续又补了了三道题&#xff0c;还有一道题看了学长题解后感觉有点超出我的能力范围了&#xff0c;就留给以后的自己吧。…

【区块链】区块链架构设计:从原理到实践

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 区块链架构设计&#xff1a;从原理到实践引言一、区块链基础概念1.1 区块链定义…

4.1 四个子空间的正交性

一、四个子空间的正交性 如果两个向量的点积为零&#xff0c;则两个向量正交&#xff1a; v ⋅ w v T w 0 \boldsymbol v\cdot\boldsymbol w\boldsymbol v^T\boldsymbol w0 v⋅wvTw0。本章着眼于正交子空间、正交基和正交矩阵。两个子空间的中的向量&#xff0c;一组基中的向…

网络知识 思维导图

计算机网络基础知识点多且杂&#xff0c;想要系统地学习&#xff0c;思维导图肯定是必不可少的。今天整理了38张思维导图&#xff0c;帮助你轻松理清思路&#xff0c;快速掌握关键内容。建议你收藏起来慢慢看&#xff0c;在看过之后最好能重新动手画一画&#xff0c;让计算机网…

TCP与UDP_三次握手_四次挥手

TCP vs UDP TCP数据 具体可以通过Cisco Packet Tracer工具查看&#xff1a; UDP数据 三次握手、四次挥手 为什么是3/4次&#xff1f;这牵扯到单工、双工通信的问题 TCP建立连接&#xff1a;表白 TCP释放连接&#xff1a;分手 TCP—建立连接—三次握手 解释&#xff1a; 首先&…

RTSP协议分析与安全实践

RTSP协议&#xff0c;全称实时流协议(Real Time Streaming Protocol)&#xff0c;前文已经简单介绍了RTSP相关协议&#xff1b; RTSP和RTP(RTCP) 这里再提一下RTSP和RTP/RTCP、RSVP的关系&#xff1b;如图&#xff1a; RTSP和HTTP 相似性&#xff1a;RTSP和HTTP协议都使用纯…

Linux简单使用——配置仓库

虚拟机和Xshell连接 在虚拟机上打开终端查看IP 在Xshell上建立会话 输入ssh root192.168.231.123 防火墙关闭 、 重启计算机命令 删除文件 然后ls查看 清除之前的垃圾 最后做一下命令缓存

借助AI快速提高英语听力:如何获得适合自己的听力材料?

英语听力是英语学习中的一个重要组成部分&#xff0c;它对于提高语言理解和交流能力至关重要。可理解性学习&#xff08;comprehensible input&#xff09;是语言习得理论中的一个概念&#xff0c;由语言学家Stephen Krashen提出&#xff0c;指的是学习者在理解语言输入的同时&…

全栈人工智能工程师:现代博学者

任何在团队环境中工作过的人都知道&#xff0c;每个成功的团队都有一个得力助手——无论你的问题性质如何&#xff0c;他都能帮助你。在传统的软件开发团队中&#xff0c;这个人是一个专业的程序员&#xff0c;也是另一种技术的专家&#xff0c;可以是像Snowflake这样的数据库技…