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;},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/68989.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jupyter Notebook 好用在哪?

Jupyter Notebook 是一个 Web 应用程序&#xff0c;便于创建和共享文学化程序文档&#xff0c;支持实时代码、数学方程、可视化和 Markdown&#xff0c;其用途包括数据清理和转换、数值模拟、统计建模、机器学习等等。目前&#xff0c;数据挖掘领域中最热门的比赛 Kaggle 里的资…

MySQL用navicat工具对表进行筛选查找

这个操作其实很简单&#xff0c;但是对于没操作的人来说&#xff0c;就是不会呀。所以小编出这一个详细图解&#xff0c;希望能够帮助到大家。话不多说看图。 第一步&#xff1a; 点进一张表&#xff0c;点击筛选。 第二步&#xff1a; 点击添加 第三步&#xff1a; 选择要…

诗诺克科技引领数字资产智能交易革命

在当今全球金融市场中&#xff0c;数字资产的崛起正引发着一场前所未有的变革。随着区块链技术不断演进和数字资产广泛获得认可&#xff0c;智能交易系统正在迅速成为投资者和交易者的首选工具。这一趋势不仅在全球范围内显著&#xff0c;而且为金融领域的未来带来了令人瞩目的…

前端、后端面试集锦

诸位读者&#xff0c;我们在工作的过程中&#xff0c;经常会因跳槽而面试。 你开发能力很强&#xff0c;懂得技术也很多&#xff0c;若加上条理清晰的面试话术&#xff0c;可以让您的面试事半功倍。 个人博客阅读量破170万&#xff0c;为尔倾心打造的 面试专栏-前端、后端面试…

总结开发中一些数据处理方法的封装

摘要&#xff1a; 开发中经常会遇到一些组件需要的特定数据结构&#xff0c;后端不一定会返回你需要的数据结构的&#xff0c;所以还是要前端来处理的&#xff01;这里来总结一下平常开发中遇到的需要处理结构的方法&#xff0c;下次遇到直接拿来用就可以了&#xff01; 目录概…

Docker构建Springboot项目,并发布测试

把SpringBoot项目打包成Docker镜像有两种方案&#xff1a; 全自动化&#xff1a;先打好docker镜像仓库&#xff0c;然后在项目的maven配置中配置好仓库的地址&#xff0c;在项目里配置好Dockerfile文件&#xff0c;这样可以直接在idea中打包好后自动上传到镜像仓库&#xff0c…

抢跑预制菜,双汇发展转守为攻?

懒&#xff0c;懒出新风口&#xff0c;预制菜竟成了年轻人新时代的“田螺神话”&#xff1f; 《2022年中国预制菜产业发展白皮书》数据显示&#xff0c;2022年全国预制菜的市场规模是4196亿元人民币&#xff0c;到2026年可以突破万亿大关。 预制菜的火爆显而易见&#xff0c;…

使用docker容器内的anaconda虚拟环境启动python web项目

1、环境安装 1.1 基础镜像 这里以ubuntu18.04 cuda 11.8为基础镜像&#xff08;主机支持nvidia-gpu&#xff09; &#xff08;1&#xff09;拉取ubuntu18.4 cuda11.8镜像 docker pull nvidia/cuda:11.8.0-devel-ubuntu18.04 1.2 docker下anaconda安装 &#xff08;1&am…

Linux centos7 bash编程(循环与条件判断)

在编程训练中&#xff0c;循环结构与条件判断十分重要。 根据条件为真为假确定是否执行循环。 有时&#xff0c;根据条件的真假结果&#xff0c;决定执行哪些语句&#xff0c;这就是分支语句。 为了训练分支语句与循环语句&#xff0c;我们设计一个案例&#xff1a; 求一组…

【数据结构】顺序表详解

当我们写完通讯录后&#xff0c;顺序表肯定难不倒你&#xff0c;跟着小张一起来学习顺序表吧&#xff01; 线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#x…

EasyPOI处理excel、CSV导入导出

1 简介 使用POI在导出导出excel、导出csv、word时代码有点过于繁琐&#xff0c;好消息是近两年在开发市场上流行一种简化POI开发的类库&#xff1a;easyPOI。从名称上就能发现就是为了简化开发。 能干什么&#xff1f; Excel的快速导入导出,Excel模板导出,Word模板导出,可以…

k8s环境部署配置

目录 一.虚拟机准备 二.基础环境配置&#xff08;各个节点都做&#xff09; 1.IP和hosts解析 2.防火墙和selinux 3.安装基本软件 4.配置时间同步 5.禁用swap分区 6.修改内核参数并重载 7.配置ipvs 三.docker环境&#xff08;各个节点都做&#xff09; 1.配置软件源并…

【构造】CF Edu 12 D

Problem - D - Codeforces 题意&#xff1a; 思路&#xff1a; 这种题一定要从小数据入手&#xff0c;不然很有可能走歪思路 先考虑n 1的情况&#xff0c;直接输出即可 然后是n 2的情况&#xff0c;如果相加是质数&#xff0c;就输出2个&#xff0c;否则就输出一个 然后…

MATLAB 动态图GIF

MATLAB 动态图GIF 前言一、创建动态图&#xff08;动态曲线、动态曲面&#xff09;1. 创建动画曲线&#xff08;MATLAB animatedline函数&#xff09;2. 创建动画曲面 二. 保存动态图三、完整示例1. 动态曲线&#xff08; y s i n ( x ) ysin(x) ysin(x)&#xff09;2. 动态曲…

【JavaEE进阶】Spring事务和事务传播机制

文章目录 一. 什么是Spring事务二. Spring中事务的实现1. Spring编程式事务2. 声明式事务2.1 trycatch下事务不会自动回滚的解决方案2.2 Transactional 作用范围2.3 Transactional 参数说明2.4 Transactional 工作原理 三. 事务的隔离级别1. 事务的四大特性2. Spring中设置事务…

发生OOM时JVM会退出吗

程序是否退出和发生 OOM 无关 需要明确&#xff0c;程序是否退出和发生 OOM 无关&#xff0c;而和当前是否还有存活的非守护线程有关。 只要还有运行中的子线程&#xff0c;即使 main 线程结束或异常崩溃了&#xff0c;程序也不会停止。 public class TestThreadRun {privat…

sql:SQL优化知识点记录(十)

&#xff08;1&#xff09;慢查询日志 Group by的优化跟Order by趋同&#xff0c;只是多了一个having 开启慢查询日志&#xff1a; 演示一下慢sql&#xff1a;4秒之后才会出结果 查看一下&#xff1a;下方显示慢查询的sql &#xff08;2&#xff09;批量插入数据脚本 函数和存…

质量属性案例-架构真题(二十一)

试题一 某电子商务公司升级会员与促销管理系统&#xff0c;向用户提交个性化服务&#xff0c;提高用户粘性。在项目建立之初&#xff0c;公司领导人一致认为目标是提升会员管理方式的灵活性&#xff0c;由于当前用户规模不大&#xff0c;用户简单&#xff0c;系统方面不需要做…

聊聊如何玩转spring-boot-admin

前言 1、何为spring-boot-admin&#xff1f; Spring Boot Admin 是一个监控工具&#xff0c;旨在以良好且易于访问的方式可视化 Spring Boot Actuators 提供的信息 快速开始 如何搭建spring-boot-admin-server 1、在服务端项目的POM引入相应的GAV <dependency><grou…

图神经网络和分子表征:4. PAINN

如果说 SchNet 带来了【3D】的火种&#xff0c;DimeNet 燃起了【几何】的火苗&#xff0c;那么 PAINN 则以星火燎原之势跨入 【等变】时代。 在 上一节 中&#xff0c;我们提到&#xff0c; PAINN 在看到 DimeNet 取得的成就之后&#xff0c;从另一个角度解决了三体几何问题&a…