element-plus el-table表格默认选中某一行
需求:进入页面时默认选中表格第一行
<el-tableref="singleTableRef":data="tableData"highlight-current-row@row-click="handleCurrentChange"
><el-table-column property="date" label="日期" /><el-table-column property="name" label="姓名"/><el-table-column property="address" label="地址"/>
</el-table>
三个注意点:
- ref="singleTableRef" ——> 用于调用 table 组件的方法 setCurrentRow(setCurrentRow 用于单选表格,设定某一行为选中行)
- highlight-current-row ——> 用于高亮当前行
- @row-click="handleCurrentChange" ——> 当某一行被点击时会触发该事件
<script setup lang="ts">
import { firstPageAPI } from '@/utils/api'
import { ref } from 'vue'
import { ElTable } from 'element-plus'interface User {date: stringname: stringaddress: string
}let currentRow = ref()
let tableData = ref([]) // 表格数据
const singleTableRef = ref<InstanceType<typeof ElTable>>()
//
const setCurrent = (row?: User) => {singleTableRef.value!.setCurrentRow(row)
}
// 接口请求
await firstPageAPI().then((res: any) => {currentRow.value = res.data[0]tableData.value = res.data// 选中表格第一行数据setTimeout(() => {setCurrent(tableData.value[0])},200)
})
// 点击行事件
const handleCurrentChange = (val: User | undefined) => {currentRow.value = valconsole.log('选中行数据', currentRow.value)
}onMounted(() => {setCurrent(tableData.value[0])
})</script>
注意 在 onMounted 生命周期钩子 DOM 元素才被创建和渲染,所以 通过 ref 获取 DOM 元素时需要在 onMounted 里。
相关文章:
element-plus el-table表格默认选中某一行
需求:进入页面时默认选中表格第一行 <el-tableref"singleTableRef":data"tableData"highlight-current-rowrow-click"handleCurrentChange" ><el-table-column property"date" label"日期" /><…...
Vue+SpringBoot打造民宿预定管理系统
目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用例设计2.2 功能设计2.2.1 租客角色2.2.2 房主角色2.2.3 系统管理员角色 三、系统展示四、核心代码4.1 查询民宿4.2 新增民宿4.3 新增民宿评价4.4 查询留言4.5 新增民宿订单 五、免责说明 一、摘要 1.1 项目介绍 基于…...
基于单片机的模糊PID炉温控制系统设计
摘 要 电热炉是在工业热处理的生产中广泛使用的一种设备,电热炉的温度控制系统存在时变性,非线性,滞后性等特征,难以用常规PID的控制器对系统达到很好的控制效果。当控温精度的要求高时,使用传统的控制理论方法难以达…...
深入浅出落地应用分析:AI数字人「微软小冰」
hi,各位,今天要聊的是AI小冰,机缘巧合,投递了这家公司的产品,正好最近在看数字人相关的,就详细剖析下这款产品! 前言 小冰,全称为北京红棉小冰科技有限公司,前身为微软(亚洲)互联网工程院人工智能小冰团队,是微软全球最大的人工智能独立产品研发团队。作为微软全…...
【早鸟优惠|高录用|EI稳定检索】2024年虚拟现实、图像和信号处理国际学术会议(ICVISP 2024)诚邀投稿/参会!
【早鸟优惠|高录用|EI稳定检索】 2024年虚拟现实、图像和信号处理国际学术会议(ICVISP 2024)诚邀投稿/参会! # 早鸟优惠 # 先投稿先送审 # #投稿免费参会、口头汇报及海报展示# 2024年虚拟现实、图像和信号处理国际学术会议(I…...
CPU设计实战—异常处理指令
异常类型以及精确异常的处理 异常有点像中断,处理完还要回到原来的状态,所以需要对之前的状态进行保存。本CPU主要实现对以下异常的处理: 1.外部硬件中断 2.复位异常 3.系统调用异常(发生在译码阶段) 4.溢出异常&…...
Elasticsearch(13) match_phrase的使用
elasticsearch version: 7.10.1 match_phrase 语法 POST <index>/_search {"query": {"match_phrase": {"<field_name>": {"query": "<your_search_phrase>","slop": <max_dis…...
通过路由器监控,优化网络效率
路由器是网络的基本连接组件,路由器监控涉及将路由器网络作为一个整体进行管理,其中持续监控路由器的性能、运行状况、安全性和可用性,以确保更好的操作和最短的停机时间,因此监控路由器至关重要。 为什么路由器监控对组织很重要…...
使用canvas实现图纸标记及回显
图纸 图纸标记后的效果图 最近做的一个qms项目里面,需要前端在图纸上实现标记及标记后的内容还要能够回显,然后后端通过标记的点,去读取标记图纸的内容,如一些公式、数据之类的,目前实现的功能有 在图纸上面进行矩形…...
鸿蒙-自定义组件的生命周期
目录 自定义组件的生命周期 1.aboutToAppear 2.aboutToDisappear 3.onPageShow 4.onPageHide 5.onBackPress 日志输出 1.显示页面 2.页面点击返回按钮 3.页面跳转 4.页面返回 自定义组件的生命周期 先来一段列子 import router from ohos.router Entry Component…...
【Linux】自动化构建工具-make/Makefile
个人主页 : zxctscl 如有转载请先通知 文章目录 1. 前言2. 认识make/Makefile3. 了解make/Makefile原理3.1 依赖关系和依赖方法3.2 make检测的顺序3.3 PHONY:XXX 4. makefile内置符号 1. 前言 在上一篇中已经了解了【Linux】编译器-gcc/g使用,这次来一起…...
week07day03(power bi dax公式 零售数据业务分析)
一. 切片器(筛选)相关的三个函数 1.all (all后面的数据意思是 不受其影响) #ALL 筛选的是 筛选器 或 切片器#计算 销售金额 ,并且 不受到 门店ID 控制 计算金额 CALCULATE(SUM(销售表[金额]),ALL(销售表[门店ID]))#计算 销售金额 &#x…...
rembg报错onnxruntime_providers_tensorrt.dll
报错: 2024-03-16 04:16:59.4413827 [E:onnxruntime:Default, provider_bridge_ort.cc:1534 onnxruntime::TryGetProviderInfo_TensorRT] D:\a_work\1\s\onnxruntime\core\session\provider_bridge_ort.cc:1209 onnxruntime::ProviderLibrary::Get [ONNXRuntimeErro…...
精酿啤酒:一口啤酒,一份享受
在繁华的都市生活中,我们总是匆匆忙忙,追求着各种目标和成就。然而,在这个过程中,我们往往忽略了生活的本质,那就是享受。而Fendi Club 啤酒,正是为那些追求品质生活的都市精英们量身打造的。 Fendi Club啤…...
git报: “fatal: detected dubious ownership in repository“
“fatal: detected dubious ownership in repository”的中文翻译是:“致命错误:检测到仓库中存在可疑的所有权问题”。 这句话意味着 Git 在检查代码仓库时发现所有权存在问题,可能是由于文件或目录的所有权与 Git 仓库预期的所有权不匹配。…...
代码随想录算法训练营第27天|93.复原IP地址、78.子集、90.子集二
目录 一、力扣93.复原IP地址1.1 题目1.2 思路1.3 代码1.4 总结 二、力扣78.子集2.1 题目2.2 思路2.3 代码2.4 总结 三、力扣90.子集二3.1 题目3.2 思路3.3 代码3.4 总结 一、力扣93.复原IP地址 (比较困难,做起来很吃力) 1.1 题目 1.2 思路 …...
Java微服务轻松部署服务器
我们在日常开发微服务之后需要再服务器上面部署,那么如何进行部署呢,先把微服务的各个服务和中间件以及对应的端口列举出来,都打包成镜像,以及前端代码部署的nginx,使用docker-compose启动,访问服务器nginx…...
Wordpress站点通过修改.htaccess 设置重定向实现强制 https 访问
要在WordPress站点上通过修改.htaccess文件实现强制HTTPS访问,您可以按照以下步骤进行操作: 登录到WordPress站点管理后台。 在文件管理器或通过FTP访问网站根目录,找到并打开名为 .htaccess 的文件。 在打开的文件中添加以下代码…...
人大金仓助力国家电网调度中心培养国产数据库专家人才
近日,为进一步提升调度自动化安全可靠水平,提高电网数据应用效能,人大金仓助力国家电网调度中心培养国产数据库专家人才。 调度自动化系统拥有海量电网数据资源,是支撑电网安全经济优质运行的重要保障。数据库是调度自动化系统稳定运行的基石之一,其结构严谨、运行稳定、扩展灵…...
什么是增强型SSL证书?购买一张需要多少钱?
增强型SSL证书是一种提供更高级别安全验证与用户信任度的网络安全工具,也被称为EV证书。相较于DV(域名验证)和OV(组织验证)证书,它通过严格的身份核实流程确保网站所有者的合法性和真实性。 首先࿰…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...
Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制: 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程,创建出来的进程就是子进程,原来的进程为父进程。…...
处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的
修改bug思路: 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑:async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统,主要的模块包括管理员;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...
2025年低延迟业务DDoS防护全攻略:高可用架构与实战方案
一、延迟敏感行业面临的DDoS攻击新挑战 2025年,金融交易、实时竞技游戏、工业物联网等低延迟业务成为DDoS攻击的首要目标。攻击呈现三大特征: AI驱动的自适应攻击:攻击流量模拟真实用户行为,差异率低至0.5%,传统规则引…...
