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
🏆IntelliJ IDEA创建Web项目并使用Web服务器----Tomcat 以下是本篇文章正文内容,下面案例可供参考(提示:本篇文章属于原创,请转发或者引用时注明出处。),大家记得支持一下!ÿ…...

rk3399 linux 5.10 usb 2.0设备上电概率性注册失败
多次开关机,发现usb hub和4G都通信失败了,这就有点奇怪了,按理说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: CUDA 12.2 fp16 dnn 编译错误 错误 C2666: operator !: 具有类似的转换重载函数 解决: 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 进度处 处理方法 ● 重新制作启动盘,写入方式改为:【USB-ZIPv2】 ● 设置服务器的 bios设置,启动方式改为【UEFI】 ● 重启开机安装即可...

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

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,本…...
前端实习day37~day38
昨晚太累了,就没有写博客,今天一起写好了,在昨天和今天的努力下,终于把业务模型的基本版本跑通了,明天再补充一下小接口,然后再把一些异常情况判断一下,争取明天弄完,然后早点下班&a…...
题目:2635.转换数组中的每个元素
题目来源: leetcode题目,网址:2635. 转换数组中的每个元素 - 力扣(LeetCode) 解题思路: 按要求模拟即可。 解题代码: /*** 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框架,其参数具有重要的作用。在FastAPI中,参数被用于接收HTTP请求中的数据及其它相关信息。 FastAPI支持的参数类型包括: 查询参数(query parameters) 查询参数是指将参数附加到URL末…...

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

【USRP】集成化仪器系列2 :示波器,基于labview实现
USRP 示波器 1、设备IP地址:默认为192.168.10.2,请勿 修改,运行阶段无法修改。 2、中心频率:当需要生成不同频率单载波的 时候请直接修改中心频率,在运行的时候您 也可以直接修改中心频率。 3、接收增益:…...
Linux map type uncache 和 write combine区别
文章目录 前言一、定义二、隐含区别总结 前言 这段时间被Map Cache Type坑了一次。 GPU的PCI bar地址map成uncache 的还是 write combine? 一、定义 uncache(uc) : map后,CPU读写不经过Cache write combine(wb): map后,CPU读写同…...

【业务功能篇93】微服务-springcloud-多线程-异步处理-异步编排-CompletableFutrue-实战运用
异步处理编排 我们可以在商品详细信息查询的位置实现CompletableFuture的异步编排处理。 根据业务分析:3.4.5数据接口的入参信息需要来源于1数据接口的返回信息,也就是skuid 所以可以设计 1 3 4 5 串行线程 ,而 3 4 5依赖1 ,需要等…...

哈希的应用——位图
文章目录 前言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开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书对外经济贸易大学图书馆...

合并两个有序链表(每日一题)
“路虽远,行则将至” ❤️主页:小赛毛 ☕今日份刷题:合并两个有序链表 题目描述: 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例1: 输入:l1 …...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1
每日一言 生活的美好,总是藏在那些你咬牙坚持的日子里。 硬件:OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写,"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
全面解析各类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? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面,gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress,说明目标所使用的cms是wordpress,访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...