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

Vue3 el-table 默认选中 传入的数组

一、效果:

二、官网是VUE2   现更改为Vue3写法

<template><el-table:data="tableData"border striperow-key="id"ref="tableRef":cell-style="{ 'text-align': 'center' }":header-cell-style="{background: '#b7babd',color: '#1e1f22',height: '35px','text-align': 'center'}"v-loading="tableLoading"@selection-change="handleSelectionChange"><el-table-column type="selection" width="40px" :reserve-selection="true"/><el-table-column fixed prop="id" label="序号" width="60px" type="index"/><el-table-column label="编码" align="center" width="140px" prop="code"/><el-table-column label="名称" align="center" width="120px" prop="name" /></el-table>
</template>

<script setup lang="ts" name="rulesTable">const tableRef = ref()const isSelectIds = ref([]) // 选中的idconst handleSelectionChange = (selection: any[]) => {isSelectIds.value = []const ids = selection.map(item => item.id);const names = selection.map(item => item.excptName);isSelectIds.value = ids;}const open = async (selectIds: Array<any>, type: string) => {dialogVisible.value = trueisSelectIds.value = selectIdsisSelectNames.value = ""tableLoading.value = truetry {await EnergyBaseMeterInfoApi.getRulesTableList(type).then((res)=>{tableData.value = res// todo 假设默认选中的是isSelectIds.value = [12323123,232323234]// todo 假设默认选中的是// 循环需要选中的数组isSelectIds.value.forEach(id => {// 在数据源中判断是否存在const row = tableData.value.find(r => String(r.id) === id);if (row) {tableRef.value.toggleRowSelection(row, true);}});})} finally {tableLoading.value = false}}defineExpose({ open })
</script>

element官网

 

相关文章:

Vue3 el-table 默认选中 传入的数组

一、效果&#xff1a; 二、官网是VUE2 现更改为Vue3写法 <template><el-table:data"tableData"border striperow-key"id"ref"tableRef":cell-style"{ text-align: center }":header-cell-style"{background: #b7babd…...

最后一个单词的长度

题目详情&#xff1a; 解题思路&#xff1a; 用两个变量分别存储当前值和上次值&#xff0c;就可保证当前移动时记录字符个数&#xff0c;当遇到空格时&#xff0c;这次值保存到上次值&#xff0c;并清空。 代码解析&#xff1a; /* 最后一个单词的长度 */ #include <st…...

2024-11-19 kron积

若A[a11 a12; a21 a22]; B[b11 b12; b21 b22]; 则C[a11*b11 a12*b11 a21*b11 a22*b11; a11*b12 a12*b12 a21*b12 a22*b12; a11*b21 a12*b21 a21*b21 a22*b21; a11*b22 a12*b22 a21*b22 a22*b22] 用MATLAB实现 方法1&#xff1a; A [a11 a12; a21 a22]; B [b11 b12; b21 b22]…...

Redis ⽀持哪⼏种数据类型?适⽤场景,底层结构

目录 Redis 数据类型 一、String&#xff08;字符串&#xff09; 二、Hash&#xff08;哈希&#xff09; 三、List&#xff08;列表&#xff09; 四、Set&#xff08;集合&#xff09; 五、ZSet(sorted set&#xff1a;有序集合) 六、BitMap 七、HyperLogLog 八、GEO …...

树莓派2 安装raspberry os 并修改成固定ip

安装 安装raspberry os 没啥说的&#xff0c;到树莓派官网&#xff0c;下载制作启动映像盘的软件&#xff1a; https://www.raspberrypi.com/software/ 下载后&#xff0c;直接安装该软件&#xff0c;然后运行&#xff0c;选择好开发板的型号和操作系统型号&#xff0c;按照…...

11月第3周AI资讯

阅读时间:3-4min 更新时间:2024.9.9-2024.9.13 目录 DIAMOND:扩散模型在世界构建中的应用 阿里云推出Qwen2.5-Turbo:高效长文本处理,性价比卓越 微软:AI已实现几乎无限的记忆 Comfyui_Object_Migration一致性换衣模型 DeepSeek发布R1-Lite-Preview:推理AI竞争愈发…...

一次封装,解放双手:Requests如何实现0入侵请求与响应的智能加解密

引言 之前写了 Requests 自动重试的文章&#xff0c;突然想到&#xff0c;之前还用到过 Requests 自动加解密请求的逻辑&#xff0c;分享一下。之前在做逆向的时候&#xff0c;发现一般医院的小程序请求会这么玩&#xff0c;请求数据可能加密也可能不加密&#xff0c;但是返回…...

Notepad++--在开头快速添加行号

原文网址&#xff1a;Notepad--在开头快速添加行号_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Notepad怎样在开头快速添加行号。 需求 原文件 想要的效果 方法 1.添加点号 Alt鼠标左键&#xff0c;从首行选中首列下拉&#xff0c;选中需要添加序号的所有行的首列&#xff…...

Python和MATLAB示例临床因素分析

&#x1f335;Python片段 为了演示临床因素的分析&#xff0c;让我们模拟一个数据集并执行一些基本的统计和机器学习分析。我们将重点关注以下步骤&#xff1a; 模拟数据集&#xff1a;创建具有年龄、性别、BMI、吸烟状况和疾病结果等特征的临床数据。描述性统计&#xff1a;…...

嵌入式硬件实战基础篇(二)-稳定输出3.3V的太阳能电池-无限充放电

引言&#xff1a;本内容主要用作于学习巩固嵌入式硬件内容知识&#xff0c;用于想提升下述能力&#xff0c;针对学习稳压芯片和电容以及电池之间的运用&#xff0c;对于硬件PCB以及原理图的练习和前面硬件篇的实际运用&#xff1b;太阳能是一种清洁、可再生的能源&#xff0c;广…...

【数据结构】树——链式存储二叉树的基础

写在前面 书接上文&#xff1a;【数据结构】树——顺序存储二叉树 本篇笔记主要讲解链式存储二叉树的主要思想、如何访问每个结点、结点之间的关联、如何递归查找每个结点&#xff0c;为后续更高级的树形结构打下基础。不了解树的小伙伴可以查看上文 文章目录 写在前面 一、链…...

STM32-- keil常见报错与解决办法

调试问题 1. keil在线调试需要点击好几次运行才可以运行&#xff0c;要是直接下载程序直接就不运行。 解决&#xff1a;target里面的use microlib要勾选&#xff0c;因为使用了printf。 keil在线调试STM32&#xff0c;点三次运行才能跑到main的问题解决。 keil在线调试STM32…...

【大数据学习 | Spark-Core】RDD的概念与Spark任务的执行流程

1. RDD的设计背景 在实际应用中&#xff0c;存在许多迭代式计算&#xff0c;这些应用场景的共同之处是&#xff0c;不同计算阶段之间会重用中间结果&#xff0c;即一个阶段的输出结果会作为下一个阶段的输入。但是&#xff0c;目前的MapReduce框架都是把中间结果写入到HDFS中&…...

一文读懂埋阻埋容工艺

PCB 埋阻埋容工艺是一种在 PCB 板内部埋入电阻和电容的工艺。通常情况下&#xff0c; PCB 上电阻和电容都是通过贴片技术直接焊接在板面上的&#xff0c;而埋阻埋容工艺则将电 阻和电容嵌入到 PCB 板的内部层中&#xff0c;这种印制电路板,其自下而上依次包括第一介电 层,隐埋电…...

mysql 数据表导出为 markdown(附 go 语言 gorm 的实际使用)

前言 通常业务系统开发中&#xff0c;数据库的设计与维护是至关重要的环节。而数据库的文档化则是确保团队成员之间有效沟通、快速理解系统架构的基础。 但目前数据文档都是手动写的&#xff0c;耗时费力&#xff0c;由于当前项目使用的是 mysql 作为存储引擎&#xff0c;找找…...

本地云存储 MinIO 中修改用户密码

本地云存储 MinIO 中修改用户密码 MinIO 中修改用户密码前提条件步骤 1&#xff1a;安装 MinIO Client对于 Linux/macOS&#xff1a;对于 Windows&#xff1a; 步骤 2&#xff1a;配置 MinIO Client步骤 3&#xff1a;查看现有用户步骤 4&#xff1a;修改用户密码步骤 5&#x…...

go项目中比较好的实践方案

工作两年来&#xff0c;我并未遇到太大的挑战&#xff0c;也没有特别值得夸耀的项目。尽管如此&#xff0c;在日常的杂项工作中&#xff0c;我积累了不少心得&#xff0c;许多实践方法也在思考中逐渐得到优化。因此&#xff0c;我在这里记录下这些心得。 转发与封装 这个需求…...

回溯法基础入门解析

回溯法 前 言 回溯法也可以叫做回溯搜索法&#xff0c;它是一种搜索的方式。回溯是递归的副产品&#xff0c;只要有递归就会有回溯。回溯法&#xff0c;一般可以解决如下几种问题&#xff1a; 组合问题&#xff1a;N个数里面按一定规则找出k个数的集合切割问题&#xff1a;一…...

计算机网络-VPN虚拟专用网络概述

前面我们学习了在企业内部的二层交换机网络、三层路由网络包括静态路由、OSPF、IS-IS、NAT等&#xff0c;现在开始学习下VPN&#xff08;Virtual Private Network&#xff0c;虚拟专用网络&#xff09;&#xff0c;其实VPN可能很多人听到第一反应就是梯子&#xff0c;但是其实这…...

信创时代的数据库之路:2024 Top10 国产数据库迁移与同步指南

数据库一直是企业数字化和创新的重要基础设施之一。从传统的关系型数据库到非关系型数据库、分析型数据库&#xff0c;再到云数据库和多模数据库&#xff0c;这一领域仍在持续变革中&#xff0c;各种新型数据库产品涌现&#xff0c;数据管理的能力和应用场景也由此得到了扩展。…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...