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

element+vue table表格全部数据和已选数据联动

在这里插入图片描述

1.组件TableChoose

<template><div class="tableChooseBox"><div class="tableRow"><div class="tableCard"><div class="tableHeadTip">全部{{ labelTitle }}</div><slot name="body" /></div><div class="tableCardBlank"></div><div class="tableCard"><div class="tableHeadTip">已选择{{ labelTitle }}</div><el-tableref="Table":data="goodsList"bordermax-height="300px":cell-style="$style.cellStyle":header-cell-style="$style.rowClass":row-key="getRowKeys"@select="select"@select-all="selectAll"@header-dragend="headerDragend"><el-table-columnlabel="选择"type="selection"align="center"reserve-selection></el-table-column><el-table-columnv-for="item in goodsLabelList":key="item.prop":label="item.label":prop="item.prop":width="item.width"align="center"><template slot-scope="scope"><span v-if="item.state"><el-tag v-if="scope.row.state == 0" type="danger">禁用</el-tag><el-tag v-else-if="scope.row.state == 1" type="success">启用</el-tag></span><span v-else-if="item.type"><el-tag v-if="scope.row.type == 1">{{ ROOM_TYPE[scope.row.type] }}</el-tag><el-tag v-if="scope.row.type == 0" type="success">{{ROOM_TYPE[scope.row.type]}}</el-tag></span><span v-else>{{ scope.row[item.prop] }}</span></template></el-table-column></el-table></div></div></div>
</template><script>
import tableMixin from "@/mixin/tableMixin";
import { getDictionaries, dictionaryConstants } from "@/utils/dictionaries";
export default {name: "TableChoose",props: ["goodsLabelList", "goodsList", "labelTitle", "id"],mixins: [tableMixin],components: {},data() {return {ROOM_TYPE:getDictionaries(dictionaryConstants.ROOM_TYPE.parentCode)};},computed: {},watch: {goodsList(n) {n.forEach((row) => {this.$refs.Table.toggleRowSelection(row, true);});},},methods: {// 确定唯一的key值getRowKeys(row) {return row[this.id];},select(selection, row) {this.$emit("changeChooseList", row, false);},selectAll(selection) {this.$emit("changeChooseList", {}, true);},},
};
</script><style lang="scss" scoped>
.tableChooseBox {width: 100%;
}
.tableRow {display: flex;align-items: flex-start;justify-content: space-between;
}
.tableCardBlank {width: 20px;height: 10px;
}
.tableCard {padding: 20px;box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.1);opacity: 1;border-radius: 10px;flex: 1;overflow: hidden;.tableHeadTip {font-size: 14px;font-weight: bold;line-height: 22px;color: rgba(0, 0, 0, 0.65);opacity: 1;margin-bottom: 10px;text-align: left;}
}
</style>

2.页面使用

const goodsLabelList = [{label: "货主编号",prop: "id",},{label: "货主名称",prop: "storeName",},{label: "货主地址",prop: "addressAll",},{label: "货主电话",prop: "storePhone",},
];
import TableChoose from "@/components/TableExtend/TableChoose";<table-choose:goodsLabelList="goodsLabelList":goodsList="GoodsChexkboxs":labelTitle="labelTitle"id="id"@changeChooseList="changeChooseList"><template slot="body"><el-table:data="StoreList"ref="GoodsTable"bordermax-height="350px":header-cell-style="$style.rowClass":row-key="getRowKeys"@selection-change="GoodsHandleChange"@header-dragend="headerDragend":cell-style="changeRowBgColorByIsPay"><el-table-columnlabel="选择"type="selection"align="center"reserve-selection:selectable="selectEnable"></el-table-column><el-table-columnv-for="item in goodsLabelList":key="item.prop":label="item.label":prop="item.prop"align="center"show-overflow-tooltip></el-table-column></el-table></template></table-choose>// 根据状态 来 改变 行背景颜色changeRowBgColorByIsPay({ row, rowIndex }) {if (this.forbidden.some((item) => item === row.id)) {return "background-color:  rgba(230, 162, 60, 0.1) !important";}},//配置过的数据禁用selectEnable(row, rowIndex) {if (this.forbidden.some((item) => item === row.id)) {return false;} else {return true; // 不禁用}},changeChooseList(row, clearAll) {const GoodsTable = this.$refs.GoodsTable;if (clearAll) {GoodsTable.clearSelection();} else {GoodsTable.toggleRowSelection(row, false);}},submitForm() {var dataArr = [];if (this.GoodsChexkboxs.length === 0) {this.$notification("操作失败", "error", "请勾选货主数据");return;}for (let index = 0; index < this.GoodsChexkboxs.length; index++) {const element = this.GoodsChexkboxs[index];dataArr.push({qcExamineModeEnum: this.detail.qcExamineModeEnum,ownerCode: element.id,ownerId: element.id,ownerName: element.storeName,});}qcStoreInsert(dataArr).then((res) => {const { code, msg } = res.data;const title = code === 200 ? "操作成功" : "操作失败";const type = code === 200 ? "success" : "error";this.$notification(title, type, msg);if (code === 200) {this.popVisible = false;this.getQueryList();}});},GoodsHandleChange(selection) {this.GoodsChexkboxs = selection;},

相关文章:

element+vue table表格全部数据和已选数据联动

1.组件TableChoose <template><div class"tableChooseBox"><div class"tableRow"><div class"tableCard"><div class"tableHeadTip">全部{{ labelTitle }}</div><slot name"body" …...

vue 防抖与节流用法

一、html <template><button click"getData">获取数据</button> </template>二、JS import { throttle } from "/utils/common"; export default {methods:{getData: throttle(async function(params){console.log(”获取接口数…...

IntelliJ IDEA创建Web项目并使用Web服务器----Tomcat

&#x1f3c6;IntelliJ IDEA创建Web项目并使用Web服务器----Tomcat 以下是本篇文章正文内容&#xff0c;下面案例可供参考&#xff08;提示&#xff1a;本篇文章属于原创&#xff0c;请转发或者引用时注明出处。&#xff09;&#xff0c;大家记得支持一下&#xff01;&#xff…...

rk3399 linux 5.10 usb 2.0设备上电概率性注册失败

多次开关机&#xff0c;发现usb hub和4G都通信失败了&#xff0c;这就有点奇怪了&#xff0c;按理说usb驱动是没啥问题的 先查看usb log rootlinaro-alip:/# dmesg | grep usb [ 1.723797] usbcore: registered new interface driver usbfs [ 1.723828] usbcore: regis…...

OpenHarmony 4.0 源码编译hb 问题排查记录

OS:Ubuntu 22.04 x86_64 下载好Openharmony 4.0Beta2 的源码 $ pip3 install ohos-build $ cd openharmony-4.0b2 $ hb set Traceback (most recent call last):File "/home/loongson/.local/bin/hb", line 8, in <module>sys.exit(main())File "/home/…...

Ubuntu20 安装 带cuda的opencv遇到的问题

问题1&#xff1a; CUDA 12.2 fp16 dnn 编译错误 错误 C2666: operator !: 具有类似的转换重载函数 解决&#xff1a; CUDA 12.2 fp16 dnn compilation error Issue #23893 opencv/opencv GitHub Solution: I "solved" this by using static_cast. You want …...

【每日运维】U盘启动盘安装 ESXi 6.7.0 安装卡在 loading /bnxtroce.v00

问题描述 ● ESXi 6.7.0 安装进度卡在loading /bnxtroce.v00 进度处 处理方法 ● 重新制作启动盘&#xff0c;写入方式改为&#xff1a;【USB-ZIPv2】 ● 设置服务器的 bios设置&#xff0c;启动方式改为【UEFI】 ● 重启开机安装即可...

Linux的服务器日志分析及性能调优

作为网络安全和数据传输的重要环节&#xff0c;代理服务器在现代互联网中扮演着至关重要的角色。然而&#xff0c;在高负载情况下&#xff0c;代理服务器可能面临性能瓶颈和效率问题。本文将介绍如何利用Linux系统对代理服务器进行日志分析&#xff0c;并提供一些实用技巧来优化…...

java 浅谈ThreadLocal底层源码(通俗易懂)

目录 一、ThreadLocal类基本介绍 1.概述 : 2.作用及特定 : 二、ThreadLocal类源码解读 1.代码准备 : 1.1 图示 1.2 数据对象 1.3 测试类 1.4 运行测试 2.源码分析 : 2.1 set方法解读 2.2 get方法解读 一、ThreadLocal类基本介绍 1.概述 : (1) ThreadLocal&#xff0c;本…...

前端实习day37~day38

昨晚太累了&#xff0c;就没有写博客&#xff0c;今天一起写好了&#xff0c;在昨天和今天的努力下&#xff0c;终于把业务模型的基本版本跑通了&#xff0c;明天再补充一下小接口&#xff0c;然后再把一些异常情况判断一下&#xff0c;争取明天弄完&#xff0c;然后早点下班&a…...

题目:2635.转换数组中的每个元素

​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;2635. 转换数组中的每个元素 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 按要求模拟即可。 解题代码&#xff1a; /*** param {number[]} arr* param {Function} fn* return {number[]}…...

Docker Compose具体应用

文章目录 介绍安装和配置编写docker-compose.yml文件docker-compose执行时注意事项常用命令和操作高级特性和扩展总结 介绍 Docker Compose的概述 Docker Compose是一个用于定义和运行多容器Docker应用程序的工具。它使用YAML文件来配置应用程序需要的服务、网络和卷等资源。 …...

FastAPI 参数的作用

FastAPI是一个现代化的Python web框架&#xff0c;其参数具有重要的作用。在FastAPI中&#xff0c;参数被用于接收HTTP请求中的数据及其它相关信息。 FastAPI支持的参数类型包括&#xff1a; 查询参数&#xff08;query parameters&#xff09; 查询参数是指将参数附加到URL末…...

国内免费无限制的chatgpt导航和ai画画

非常实用的AI网址导航&#xff0c;其实际使用体验非常便捷。该导航系统不仅提供了全面的网站分类和搜索功能&#xff0c;还对每个网站进行了精准的评估和排序。推荐高质量的网站资源&#xff0c;并实时检测网站的安全性&#xff0c;保障用户的上网安全。 总的来说&#xff1a…...

【USRP】集成化仪器系列2 :示波器,基于labview实现

USRP 示波器 1、设备IP地址&#xff1a;默认为192.168.10.2&#xff0c;请勿 修改&#xff0c;运行阶段无法修改。 2、中心频率&#xff1a;当需要生成不同频率单载波的 时候请直接修改中心频率&#xff0c;在运行的时候您 也可以直接修改中心频率。 3、接收增益&#xff1a;…...

Linux map type uncache 和 write combine区别

文章目录 前言一、定义二、隐含区别总结 前言 这段时间被Map Cache Type坑了一次。 GPU的PCI bar地址map成uncache 的还是 write combine&#xff1f; 一、定义 uncache(uc) &#xff1a; map后&#xff0c;CPU读写不经过Cache write combine(wb): map后&#xff0c;CPU读写同…...

【业务功能篇93】微服务-springcloud-多线程-异步处理-异步编排-CompletableFutrue-实战运用

异步处理编排 我们可以在商品详细信息查询的位置实现CompletableFuture的异步编排处理。 根据业务分析&#xff1a;3.4.5数据接口的入参信息需要来源于1数据接口的返回信息&#xff0c;也就是skuid 所以可以设计 1 3 4 5 串行线程 &#xff0c;而 3 4 5依赖1 &#xff0c;需要等…...

哈希的应用——位图

文章目录 前言1. 面试题思考2. 位图2.1 位图的概念2.2 思路讲解及代码实现结构定义构造函数set和reset接口实现set和reset测试观察test接口实现test接口测试思考 3. 位图的应用习题1习题2习题3 4. 总结5. 源码5.1 bitset.h5.2 Test.c 前言 前面的文章里我们学习了哈希表&#x…...

2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书对外经济贸易大学图书馆

2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书对外经济贸易大学图书馆...

合并两个有序链表(每日一题)

“路虽远&#xff0c;行则将至” ❤️主页&#xff1a;小赛毛 ☕今日份刷题&#xff1a;合并两个有序链表 题目描述&#xff1a; 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例1&#xff1a; 输入&#xff1a;l1 …...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

解析“道作为序位生成器”的核心原理

解析“道作为序位生成器”的核心原理 以下完整展开道函数的零点调控机制&#xff0c;重点解析"道作为序位生成器"的核心原理与实现框架&#xff1a; 一、道函数的零点调控机制 1. 道作为序位生成器 道在认知坐标系$(x_{\text{物}}, y_{\text{意}}, z_{\text{文}}…...

安全领域新突破:可视化让隐患无处遁形

在安全领域&#xff0c;隐患就像暗处的 “幽灵”&#xff0c;随时可能引发严重事故。传统安全排查手段&#xff0c;常常难以将它们一网打尽。你是否好奇&#xff0c;究竟是什么神奇力量&#xff0c;能让这些潜藏的隐患无所遁形&#xff1f;没错&#xff0c;就是可视化技术。它如…...

【Elasticsearch基础】Elasticsearch批量操作(Bulk API)深度解析与实践指南

目录 1 Bulk API概述 1.1 什么是批量操作 1.2 Bulk API的优势 2 Bulk API的工作原理 2.1 请求处理流程 2.2 底层机制 3 Bulk API的使用方法 3.1 基本请求格式 3.2 操作类型示例 3.3 响应格式 4 Bulk API的最佳实践 4.1 批量大小优化 4.2 错误处理策略 4.3 性能调…...

Kafka 消息模式实战:从简单队列到流处理(一)

一、Kafka 简介 ** Kafka 是一种分布式的、基于发布 / 订阅的消息系统&#xff0c;由 LinkedIn 公司开发&#xff0c;并于 2011 年开源&#xff0c;后来成为 Apache 基金会的顶级项目。它最初的设计目标是处理 LinkedIn 公司的海量数据&#xff0c;如用户活动跟踪、消息传递和…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(八)

uboot启动异常及解决 网络问题及解决 打开STM32CubeMX选中ETH1 - A7NS&#xff08;Linux&#xff09;Mode&#xff1a;RGMII&#xff08;Reduced GMII&#xff09;勾选ETH 125MHz Clock Input修改GPIO引脚如图所示 Net: No ethernet found.生成代码后&#xff0c;修改u-boot下…...