当前位置: 首页 > news >正文

element ui的time时间和table表格

 <el-date-picker v-model="value1" align="right" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="changeDate"></el-date-picker><el-date-picker v-model="datetime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDate"></el-date-picker>

年月日,时分秒,这种日期组件是我们经常会用到的,我们很多场景都会用到这个组件,所以今天来说一下这两个东西!这里最重要的就是要记住这两个格式,

value-format="yyyy-MM-dd HH:mm:ss"

value-format="yyyy-MM-dd"

剩下的都可以迎刃而解了~

接下来我们说一下table表格~

首先,我们先写一个el-table标签,这个就是表头,然后绑定一个data,接着写一个el-table-column标签,这个表示一列,然后给上label属性,这个属性就是代表这列叫什么名字。

<el-table :data="tableData"><el-table-column label="名称" ></el-table-column></el-table>tableData:[{name:'小刘',address:'中国',age:20},  {name:'小高',address:'中国',age:23},]

这个数据是一个数组对象,然后我们有name,address,age这三列,那么我们肯定需要三个el-table-column标签。还有一个重要的属性,叫prop,这个代表,哪一列,要放什么数据,就绑定什么属性

 <el-row style="margin: 20px 0;"><el-table :data="tableData"><el-table-column label="名称" prop="name"></el-table-column><el-table-column label="国籍" prop="address"></el-table-column><el-table-column label="年龄" prop="age"></el-table-column></el-table></el-row>

这样就绑定了三个属性,都会显示在下面了
还可以设置表头的样式,通过 :header-cell-style就可以

 <el-row style="margin: 20px 0;"><el-table stripe :data="tableData" border :header-cell-style="{background:'red',fontSize:'20px'}"><el-table-column label="名称" prop="name"></el-table-column><el-table-column label="国籍" prop="address"></el-table-column><el-table-column label="年龄" prop="age"></el-table-column></el-table></el-row>

我们还会遇到很多的实际操作,比如:我们最后一列要变成按钮,这个操作也是经常用的!

<el-row style="margin: 20px 0;"><el-table stripe :data="tableData" border :header-cell-style="{background:'red',fontSize:'20px'}"><el-table-column label="名称" prop="name"></el-table-column><el-table-column label="国籍" prop="address"></el-table-column><el-table-column label="年龄" prop="age"></el-table-column><el-table-column label="操作"><template v-slot="scope"><el-button type="primary" @click="edit(scope.row)">编辑</el-button></template></el-table-column></el-table></el-row>methods:{edit(row){alert(row.name)}}

我们首先更改最后一列,变成操作,然后用v-slot插槽,接着写一个按钮,在按钮上绑定一个点击事件,然后再点击事件中,将行数据传入,最后在方法中写弹出事件,弹出名字即可
 

v-slot 指令的使用场景包括但不限于以下几种:

  • 在组件中使用插槽,将父组件中的内容传递给子组件。
  • 在子组件中使用具名插槽,根据插槽名称渲染不同的内容。
  • 在子组件中使用作用域插槽,将子组件中的数据传递到父组件中进行渲染。

我们再来美化一下弹窗,哈哈哈哈

methods:{edit(row){// alert(row.name)this.$confirm('这是个什么玩意?','提示',{type:'warning'}).then(res=>{this.$message.success("ok我点击了确认")}).catch(()=>{this.$message.warning("ok我点击了取消")})}}

这样点击edit的时候就会弹出弹窗,美观很多

相关文章:

element ui的time时间和table表格

<el-date-picker v-model"value1" align"right" type"date" placeholder"选择日期" value-format"yyyy-MM-dd" change"changeDate"></el-date-picker><el-date-picker v-model"datetime"…...

安装 tensorflow 遇到的问题

Q1: 没发现满足需求的版本 ERROR: Could not find a version that satisfies the requirement keras-nightly~2.5.0.dev (from tensorflow) (from versions: none) ERROR: No matching distribution found for keras-nightly~2.5.0.dev 按照官方文档Installation — TensorFl…...

音视频封装格式:多媒体世界的“容器”与“桥梁”

一、音视频封装格式的核心概念 音视频封装格式(容器)是一种将编码后的视频、音频、字幕等数据按规则整合的文件格式,其本质是多媒体数据容器,核心作用包含: 同步多轨道数据:通过时间戳(PTS/DTS)实现音画同步。组织数据流:统一管理视频流、音频流、字幕流等,并存储元…...

【学习资料】嵌入式人工智能Embedded AI

图片来源&#xff1a; Embedded Artificial Intelligence for Business Purposes | DAC.digital 随着AI在设备端的应用&#xff0c;我们看到越来越多的可穿戴设备出现以及自动驾驶汽车的发展&#xff0c;可以看到嵌入式人工智能是新的发展方向。我为大家介绍嵌入式人工智能的…...

Linux命令大全完整版

1. linux 系统管理命令 adduser 功能说明&#xff1a;新增用户帐号。语  法&#xff1a;adduser补充说明&#xff1a;在 Slackware 中&#xff0c;adduser 指令是个 script 程序&#xff0c;利用交谈的方式取得输入的用户帐号资料&#xff0c;然后再交由真正建立帐号的 use…...

红队内网攻防渗透:内网渗透之内网对抗:实战项目VPC2打靶父子域三层路由某绒免杀下载突破约束委派域控提权

红队内网攻防渗透 实战网络攻防靶场记录1.靶机配置信息讲解2.靶场渗透完整流程2.1 入口点:192.168.139.130(win2008 R2)2.1.1 tomcat后台war包获取权限2.1.2 tomcat使用后门上线CS平台2.1.3 信息收集获取数据库密码2.2 入口点横向:192.168.10.11 (win2012 SQL)2.2.1 SQLs…...

always和assign语法区别

always语句可以带时钟, 也可以不带时钟。 一,assign和always区别 assign 语句使用时不能带时钟。 assign a=1; assign b=2; 在always不带时钟时,逻辑功能和assign完全一致,都是只产生组合逻辑。比较简单的组合逻辑推荐使用assign语句,比较复杂的组合逻辑推荐使用 al…...

深入了解ThreadLocal底层原理-高并发架构

目录 什么是ThreadLocal应用场景需求实现 ThreadLocal核心源码解读Thread 、ThreadLocal、ThreadLocalMap 三者的关系 四大引用-强软弱虚类型ThreadLocal内存泄漏ThreadLocal为什么需要设计成弱引用&#xff1f;并且ThreadLocal用完需要remove呢&#xff1f;原因 什么是ThreadL…...

《AI与NLP:开启元宇宙社交互动新纪元》

在科技飞速发展的当下&#xff0c;元宇宙正从概念逐步走向现实&#xff0c;成为人们关注的焦点。而在元宇宙诸多令人瞩目的特性中&#xff0c;社交互动体验是其核心魅力之一。人工智能&#xff08;AI&#xff09;与自然语言处理&#xff08;NLP&#xff09;技术的迅猛发展&…...

基于vue和微信小程序的校园自助打印系统(springboot论文源码调试讲解)

第3章 系统设计 3.1系统功能结构设计 本系统的结构分为管理员和用户、店长。本系统的功能结构图如下图3.1所示&#xff1a; 图3.1系统功能结构图 3.2数据库设计 本系统为小程序类的预约平台&#xff0c;所以对信息的安全和稳定要求非常高。为了解决本问题&#xff0c;采用前端…...

电脑开机一段时间就断网,只有重启才能恢复网络(就算插网线都不行),本篇文章直接解决,不要再看别人的垃圾方法啦

下面的是我解决问题的心路历程&#xff0c;不想看的可以直接跳到解决方法上面&#xff01; 内心思路&#xff1a; w11电脑更新过系统后&#xff0c;我的电脑是常年不关机的&#xff0c;但是一天突然断网&#xff0c;试了很多方法都连不上&#xff0c;重启电脑就会好&#xff0…...

go-zero学习笔记(五)

api自定义中间件 1. 修改.api文件 syntax"v1"type (GetInfoReq {IDs []string json:"IDs"}GetInfoData {ID string json:"ID"Name string json:"Name"MD5 string json:"md5"Size int64 json:"Size"Up…...

DeepSeek技术全景解析:架构创新与行业差异化竞争力

一、DeepSeek技术体系的核心突破 架构设计&#xff1a;效率与性能的双重革新 Multi-head Latent Attention (MLA)&#xff1a;通过将注意力头维度与隐藏层解耦&#xff0c;实现显存占用降低30%的同时支持4096超长上下文窗口。深度优化的MoE架构&#xff1a;结合256个路由专家…...

函数中的形参和实参(吐槽)

def greet_user(user_name):print(f"Hello,{user_name.title()}!")greet_user("zhangsan") 在以上函数中&#xff0c;user_name是形参&#xff0c; 在greet_user("zhangsan")中&#xff0c;值“zhangsan”是实参。这本身没什么大问题。 但是这…...

使用 Promptic 进行对话管理需要具备python技术中的那些编程能力?

使用 Promptic 进行对话管理时,需要掌握一些基础的编程知识和技能,以下是详细说明: 1. Python 编程基础 Promptic 是一个基于 Python 的开发框架,因此需要具备一定的 Python 编程能力,包括: 函数定义与使用:了解如何定义函数、使用参数和返回值。类型注解:熟悉 Python…...

【模块】 ASFF 模块

ASFF (Adaptively Spatial Feature Fusion) 方法针对单次射击物体检测器的特征金字塔中存在的不同特征尺度之间的不一致性问题&#xff0c;提出了一种新颖的数据驱动策略进行金字塔特征融合。通过学习空间上筛选冲突信息的方法&#xff0c;减少了特征之间的不一致性&#xff0c…...

第二十四周:OpenPose:使用部分亲和场的实时多人2D姿态估计

OpenPose 摘要Abstract文章信息引言方法同时进行检测和关联关键部位检测的置信图PAF使用PAF进行多人解析 关键代码实验结果创新与不足总结 摘要 本篇博客介绍了一种实时多人2D姿态估计框架——OpenPose&#xff0c;其核心思想是通过自底向上的全局关联策略&#xff0c;解决传统…...

ReACT agent和FC agent

rag系列文章目录 文章目录 rag系列文章目录前言一、简介二、示例说明三、对比总结 前言 大模型时代llm正在改变我们的生活&#xff0c;它可以帮助人类写作&#xff0c;写代码&#xff0c;翻译等等&#xff0c;但是llm的知识在训练时被冻结&#xff0c;无法直接使用api接入外部…...

大数据之常用Linux操作

一、 修改文件夹的所有者和所属组均为test用户 chown test:test /opt/文件夹名称二、使用rsync同步文件 rsync主要用于备份和镜像。具有速度快、避免复制相同内容和支持符号链接的优点。 rsync -av $pdir/$fname $user$host:$pdir/$fname三、配置环境变…...

计算机视觉行业洞察--影像行业系列第一期

计算机视觉行业产业链的上下游构成相对清晰&#xff0c;从基础技术研发到具体应用场景的多个环节相对成熟。 以下是我结合VisionChina经历和行业龙头企业对计算机视觉行业产业链上下游的拆解总结。 上下游总结 上游产业链分为软硬件两类&#xff0c;视觉的硬件主要指芯片、…...

自定义实现简版状态机

状态机&#xff08;State Machine&#xff09;是一种用于描述系统行为的数学模型&#xff0c;广泛应用于计算机科学、工程和自动化等领域。它通过定义系统的状态、事件和转移来模拟系统的动态行为。 基本概念 状态&#xff08;State&#xff09;&#xff1a;系统在某一时刻的特…...

【Deepseek】Linux 本地部署 Deepseek

前言 本文介绍在 Linux 系统上部署 Deepseek AI。本文教程是面向所有想体验 AI 玩家的一个简易教程&#xff0c;因此即使是小白也可以轻松完成体验&#xff0c;话不多说立马着手去干。 [注]&#xff1a;笔者使用的系统为 Ubuntu 24.10 1. 关于 ollama Ollama 是一款开源应用…...

JavaScript系列(83)--正则表达式高级详解

JavaScript 正则表达式高级详解 &#x1f3af; 正则表达式是处理文本的强大工具&#xff0c;掌握其高级特性可以让我们更高效地处理复杂的文本匹配和处理任务。让我们深入探讨JavaScript中正则表达式的高级应用。 正则表达式基础回顾 &#x1f31f; &#x1f4a1; 小知识&…...

【行业解决方案篇九】【DeepSeek能源勘探:地震波数据智能解释】

第一章 先导课:给地球做CT的百年难题 各位老铁,今天咱们要聊的这个话题绝对硬核——给地球做CT还要用人工智能,这事儿到底有多刺激?想象一下你拿着医院CT报告单,但扫描对象换成深埋地下5000米的油气层,扫描仪换成总长300公里的地震波阵列,这操作难度直接飙升到地狱级。…...

密度提升30%!Intel 18A工艺正式开放代工

快科技2月23日消息&#xff0c;Intel官方网站悄然更新了对于18A(1.8nm级)工艺节点的描述&#xff0c;称已经做好了迎接客户项目的准备&#xff0c;将在今年上半年开始流片&#xff0c;有需求的客户可以随时联系。 Intel宣称&#xff0c;这是在北美地区率先量产的2nm以下工艺节…...

ESP32S3:参考官方提供的led_strip组件使用 SPI + DMA 方式驱动WS2812 RGB灯的实现思路 (实现各个平台移植使用该方式)

目录 引言使用SPI + DMA 方式实现思路分析1. 查看WS2812的datasheet手册2. 根据官方的led_strip组件的方式,自己手把手实现一遍3.完整的程序(实现霓虹灯效果)引言 参考官方提供的led_strip组件使用 SPI + DMA 方式驱动WS2812 RGB灯的实现思路,只有明白实现的思路,方能将其…...

java实现多图合成mp4和视频附件下载

java实现多图合成mp4和视频附件下载 在wutool中&#xff0c;封装了视频处理工具类&#xff0c;基于javacv和ffmpeg库&#xff0c;实现多图合成mp4、视频http附件下载等。 关于wutool wutool是一个java代码片段收集库&#xff0c;针对特定场景提供轻量解决方案&#xff0c;只…...

VulnOSv2 靶机渗透测试

春秋蝉鸣少年归~ arp发现靶机ip地址 发现开放80端口那先去访问一下 问题不大&#xff0c;没有什么有用的提示那就上dirb跑一下 这里给了一个版本号 通过searchsploit搜索了一下没有这个版本的poc/exp去网上搜搜看 这个也试了一下也利用不了回到页面上发现有个website可以点 然后…...

【STM32】内存管理

【STM32】内存管理 文章目录 【STM32】内存管理1、内存管理简介疑问&#xff1a;为啥不用标准的 C 库自带的内存管理算法&#xff1f;2、分块式内存管理&#xff08;掌握&#xff09;分配方向分配原理释放原理分块内存管理 管理内存情况 3、内存管理使用&#xff08;掌握&#…...

【环境配置】maven,mysql,node.js,vue的快速配置与上手

【环境配置】maven,mysql,node.js,vue的快速配置与上手 我们在利用springbootvue来进行全栈项目开发时&#xff0c;需要做很多的准备工作&#xff0c;其中maven,mysql,node,js和vue的配置是必不可少的。 本期我们尽可能精简地介绍它们的配置以及快速上手。 1.maven 1.1.下载…...

前端实现socket 中断重连

前端代码 let ws;let reconnectAttempts 0;const maxReconnectAttempts 5;let reconnectTimer null;// 初始化连接function connect() {ws new WebSocket(ws://localhost:3001);ws.onopen () > {console.log(✅ 连接成功);reconnectAttempts 0; // 重置重连计数器docu…...

【深度学习】Transformer 的常见的位置编码有哪些

Transformer 位置编码&#xff08;Positional Encoding&#xff09;主要用于弥补 自注意力机制&#xff08;Self-Attention&#xff09; 对位置信息的忽略&#xff0c;常见的方案有以下几种&#xff1a; 1. 绝对位置编码&#xff08;Absolute Positional Encoding&#xff09; …...

HybridCLR+Adressable+Springboot热更

本文章会手把手教大家如何搭建HybridCLRAdressableSpringboot热更。 创作不易&#xff0c;动动发财的小手点个赞。 安装华佗 首先我们按照官网的快速上手指南搭建一个简易的项目&#xff1a; 快速上手 | HybridCLR 注意在热更的代码里添加程序集。把用到的工具放到程序集里…...

收到线上服务器出现cpu告警一般怎么排查?

当线上服务器出现CPU告警时&#xff0c;可以按照以下步骤进行系统性排查&#xff0c;逐步定位问题根源&#xff1a; 1. 快速确认CPU使用情况 命令工具&#xff1a;top # 实时查看CPU占用&#xff08;按P排序进程&#xff09; htop …...

买股票的最佳时机 - 2

买卖股票的最佳时机 III 题目描述&#xff1a; 提示&#xff1a; 1 < prices.length < 1050 < prices[i] < 105 分析过程&#xff1a; 写动态规划&#xff0c;我们需要考虑一下问题&#xff1a; 定义状态状态转移方程初始条件 遍历顺序 4种状态&#xff1a; …...

pytorch入门级项目--基于卷积神经网络的数字识别

文章目录 前言1.数据集的介绍2.数据集的准备3.数据集的加载4.自定义网络模型4.1卷积操作4.2池化操作4.3模型搭建 5.模型训练5.1选择损失函数和优化器5.2训练 6.模型的保存7.模型的验证结语 前言 本篇博客主要针对pytorch入门级的教程&#xff0c;实现了一个基于卷积神经网络&a…...

【Java】求绝对值

目录 引言基础方法Math.abs()适用类型与语法代码示例 特殊数值处理复数绝对值&#xff08;模&#xff09;大整数与高精度小数 底层实现与性能优化位运算技巧&#xff08;仅限int类型&#xff09;最小值溢出与 Math.absExact()解决方案1&#xff1a;手动判断解决方案2&#xff0…...

简单爬虫:东方财富网股票数据爬取(20231230)

目标网站&#xff1a;https://quote.eastmoney.com/center/gridlist.html#hs_a_board 需求&#xff1a;将东方财富网行情中心不同板块的股票数据爬取下来 目标是将各个选项卡的股票数据全部爬取并以excel文件保存在本地。 查看网页源代码发现并没有目标数据&#xff0c;因此需…...

Vue学习教程-14内置指令

文章目录 前言一、v-text指令二、v-html指令三、v-cloak指令四、v-once指令五、v-pre指令六、其他指令 前言 Vue.js 提供了许多内置指令&#xff08;Directives&#xff09;&#xff0c;这些指令用于在模板中添加特殊功能。内置指令以 v- 前缀开始。 v-text : 更新元素的 tex…...

Java——抽象类

在Java中&#xff0c;抽象类&#xff08;Abstract Class&#xff09; 是一种特殊的类&#xff0c;用于定义部分实现的类结构&#xff0c;同时允许子类提供具体的实现。抽象类通常用于定义通用的行为或属性&#xff0c;而将具体的实现细节留给子类。 1. 抽象类的定义 语法&…...

js数据类型检测

JavaScript的数据类型检测 typeof操作符 适用场景 基本数据类型快速判断&#xff1a;适用于快速判断变量是否为number、string、boolean、undefined、function等基本数据类型。比如在函数参数检查中&#xff0c;若要求传入数字参数&#xff0c;可用typeof来初步判断。函数类型…...

Maven+SSM+SpringBoot+Mybatis-Plus

SSM技术栈&#xff1a;spring6、springmvc、mybatis、springboot3、mybatis-plus、druid&#xff1b; 前端: node、npm、vue 快速掌握&#xff1a;全新SSMSpring BootMyBatis-Plus实战精讲...

【爬虫】request库

文章目录 发送请求响应对象响应数据的方式中文乱码问题响应对象的其他属性或方法 发送带参数的请求headers和查询参数 Requests——发送http请求&#xff0c;获取响应数据 首先&#xff0c;请确保&#xff1a; 已安装 RequestsRequests 是最新的 让我们从一些简单的示例开始…...

Docker内存芭蕾:优雅调整容器内存的极限艺术

title: “&#x1f4be; Docker内存芭蕾&#xff1a;优雅调整容器内存的极限艺术” author: “Cjs” date: “2025-2-23” emoji: “&#x1fa70;&#x1f4a5;&#x1f4ca;” 当你的容器变成内存吸血鬼时… &#x1f680; 完美内存编排示范 &#x1f4dc; 智能内存管家脚本…...

云手机如何进行经纬度修改

云手机如何进行经纬度修改 云手机修改经纬度的方法因不同服务商和操作方式有所差异&#xff0c;以下是综合多个来源的常用方法及注意事项&#xff1a; 通过ADB命令注入GPS数据&#xff08;适用于技术用户&#xff09; 1.连接云手机 使用ADB工具连接云手机服务器&#xff0c;…...

力扣-贪心-53 最大子数组和

思路 先把每一个值都加到当前集合中&#xff0c;记录当前的和&#xff0c;直到当前记录和小于0了&#xff0c;再重置改记录&#xff0c;再次尝试累加 代码 class Solution { public:int maxSubArray(vector<int>& nums) {int res INT32_MIN;int curSum 0;for(in…...

【c语言】函数_作业详解

前言&#xff1a; 对应鹏哥专升本c语言&#xff0c;51集 内容&#xff1a; 找出10个数值中的最大值&#xff0c; #include <stdio.h> //求10个整数中的最大值 int main() {//准备10个整数 //int arr[10] {1,2,3,4,13,6,7,8,9,-2};//用于循环10次int i 0;//也可以自…...

超详细:数据库的基本架构

MySQL基础架构 下面这个图是我给出的一个MySQL基础架构图&#xff0c;可以清楚的了解到SQL语句在MySQL的各个模块进行执行过程。 然后MySQL可以分为两个部分&#xff0c;一个是server层&#xff0c;另一个是存储引擎。 server层 Server层涵盖了MySQL的大多数核心服务功能&am…...

PCL 边界体积层次结构(Boundary Volume Hierarchy, BVH)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 边界体积层次结构(Boundary Volume Hierarchy, BVH) 是一种高效的空间数据结构,广泛应用于计算机图形学、计算机视觉、机器人学、物理仿真等领域。它的核心思想是通过将空间递归地划分为层次化的包围体(通常是轴…...

【微服务】深入解析spring aop原理

目录 一、前言 二、AOP 概述 2.1 什么是AOP 2.2 AOP中的一些概念 2.2.1 aop通知类型 2.3 AOP实现原理 2.3.1 aop中的代理实现 2.4 静态代理与动态代理 2.4.1 静态代理实现 三、 jdk动态代理与cglib代理 3.1 jdk动态代理 3.1.1 jdk动态代理模拟实现 3.2 CGLIB 代理…...