在 el-table 中嵌入 el-checkbox el-input el-upload 多组件,实现复杂业务场景

由于业务场景的复杂性,需实现:在 el-table 表格中 嵌入 el-checkbox 多选框 及 el-input 输入框 及 el-upload 上传组件 ,先附上实现效果图。

在这里插入图片描述

从图片可以看出其实就是一个规格可以带有多个属性的规格表,实现此效果需涉及到的知识点大概有以下:

  1. 阻止冒泡
  2. this.$set() 动态绑定
  3. 图片上传,预览
  4. Scoped slot 获取到 table 内部的状态管理数据

首先搭建表格框架(固定两列),这个比较简单

<el-table><el-table-columnprop=""label="规格"width="220px"></el-table-column><el-table-columnprop=""label="属性"width="660px"></el-table-column>
</el-table>

由于行数不固定,行内容非普通的静态数据展示,故需用到 slot 来自定义

:data 属性绑定 commodityPropertyList数据,scope 获取 row, column, $index 和 store 等的表格内部数据

实现表格第一列

<el-table:data="commodityPropertyList"style="width: 100%"><el-table-columnprop=""label="规格"width="220px"><template slot-scope="scope"><span style="font-size: 14px;">{{scope.row.propertyName}}</span><i style="margin-left: 10px;" class="el-icon-delete" @click="deleteProperty(scope)" ></i><div style="display: flex;align-items: center;cursor: pointer;" class="property" @click="changeGPicFlag(scope)"><i  v-if="scope.row.gPicFlag == 1" class="el-icon-circle-check"></i><i class="el-icon-circle-close" v-else></i><div>开启图片上传</div></div></template></el-table-column><el-table-columnprop=""label="属性"width="660px"></el-table-column>
</el-table>

补充表格第二列

<el-table:data="commodityPropertyList"style="width: 100%"><el-table-columnprop=""label="规格"width="220px"><template slot-scope="scope"><span style="font-size: 14px;">{{scope.row.propertyName}}</span><i style="margin-left: 10px;" class="el-icon-delete" @click="deleteProperty(scope)" ></i><div style="display: flex;align-items: center;cursor: pointer;" class="property" @click="changeGPicFlag(scope)"><i  v-if="scope.row.gPicFlag == 1" class="el-icon-circle-check"></i><i class="el-icon-circle-close" v-else></i><div>开启图片上传</div></div></template></el-table-column><el-table-columnprop=""label="属性"width="660px"><template slot-scope="scope"><el-checkbox-group v-model="checkPropertyList"><el-checkbox v-for="(item1,index) in scope.row.options"   :label="item1" :key="item1.id" :disabled="pageType == 'view'"><div  style="display: flex;justify-content: center;align-items: center;margin-bottom: 20px;"><div style="width: 50%;font-size: 14px;">{{item1.optionValue}}</div><el-input :disabled="pageType == 'view'" style="margin-right: 20px;" size="mini" v-model="item1.optionAlias" placeholder="备注(可选)"></el-input><el-input :disabled="pageType == 'view'" size="mini" v-model="item1.optionSort" placeholder="排序,输入数字"></el-input><span v-if="scope.row.gPicFlag == 1" style="margin-left: 20px;"><div v-if="item1.gPicUrl" style="display: inline;"><el-image ref="preview2"  :preview-src-list="[showgPicUrl]" style="width: 20px;height: 20px;" :src="item1.gPicUrl"></el-image><i @click.stop.prevent="deleteImage(scope,index)" v-if="pageType != 'view'"  style="margin-left: 10px;font-size: 12px;" class="el-icon-delete" ></i><i style="margin-left: 10px;font-size: 12px;" @click.stop.prevent="previewImage2(scope,index)" class="el-icon-view"></i></div><el-upload v-show="!item1.gPicUrl && pageType != 'view'" ref="upload" class="insert-block" style="display: inline-block; vertical-align: top; margin-right: 8px;"action="/api/mdm/upload/image" :limit="1"  accept=".jpg,.jpeg,.png"  :on-success="handleSuccess2" :on-error="handleFormatError":file-list="imgFilesListOfOnce" :show-file-list="false"><i slot="default" @click.stop.prevent="uploadImage(scope,index)" class="el-icon-upload2"></i></el-upload><span>尺寸:800*800px,最多1</span></span></div></el-checkbox></el-checkbox-group></template></el-table-column>
</el-table>

到此,表格的页面及样式已基本完成,接下来还需处理事件逻辑。

表格第一列事件处理

changeGPicFlag(scope) {if(this.pageType == 'view') {return}this.commodityPropertyList.forEach((item,index) => {if(index == scope.$index) {item.gPicFlag = item.gPicFlag == 1 ? 0 : 1}})this.commodityPropertyList = [...this.commodityPropertyList]}

表格第二列事件处理

deleteImage(scope,index) {this.commodityPropertyList[scope.$index].options[index].gPicUrl = ""this.commodityPropertyList = [...this.commodityPropertyList] //实时更新修改的数据
},previewImage2(scope,index) {this.showgPicUrl = this.commodityPropertyList[scope.$index].options[index].gPicUrlthis.$refs.preview2[0].showViewer = true
},uploadImage(scope,index) {let num = 0let list = []list = this.commodityPropertyList.filter((item,index) => index < scope.$index)list.forEach(item => { num += item.options.length})//阻止冒泡到选checkboxthis.upload2Flag.propertyIndex = scope.$indexthis.upload2Flag.optionsIndex = indexthis.$refs['upload'][num+index].$refs['upload-inner'].handleClick()
},

表格“属性”列由 多选框checkbox、输入框input、 图片上传upload 等组件组成,从代码可看出 checkbox-group 包裹 input等组件,所以当在输入框输入或点击上传图片等操作时,都会触发勾选/取消勾选多选框。这效果不是我们想要的,我们只是想操作上传图片,所以需要在定义事件时加 @click.stop.prevent = 事件名 来阻止冒泡(阻止触发勾选操作)

于是又有问题出现了,当在 el-upload 组件加上 @click.stop.prevent = 事件名 时,你会发现,操作点击时不会触发弹出选择文件窗口,这是因为加了阻止冒泡后没有触发到选择文件的操作,这就需要我们自己在事件处理中写逻辑去触发。

1.需要在 el-upload 组件定义 ref
2.用 index 结合 num 找出被点击的那个 el-upload 组件

    uploadImage(scope,index) {let num = 0let list = []list = this.commodityPropertyList.filter((item,index) => index < scope.$index)list.forEach(item => { num += item.options.length})//阻止冒泡到选checkboxthis.upload2Flag.propertyIndex = scope.$indexthis.upload2Flag.optionsIndex = indexthis.$refs['upload'][num+index].$refs['upload-inner'].handleClick()//触发选择文件的弹窗},

在实现的过程中,我还碰到一个输入框不能输入的问题,我操作输入之后,没有动静,再点击勾选操作时就可以正确显示出来了。于是我猜想了很多种可能并一一去验证
1.el-checkbox 不能包裹其他标签?(从网上搜集到很少有这样复杂地使用多选框)
2.没有加 slot-scope="scope" ?

最后在控制台打印后端返回的 commodityPropertyList 数据中发现,其 options 数组下没有 optionAliasoptionSort 字段,需要前端这边自己加,最开始我是这样加的

//在commodityPropertyList获取数据的地方
......
this.commodityPropertyList.forEach((group) => {if (group.options && group.options.length) {group.options.forEach((item) => {item.optionAlias = ""item.optionSort = ""var key = item.propertyCode + ":" + item.optionCodevar prop = this.propSpenMap.get(key)if (prop) {group.gPicFlag = prop.gPicFlag == 1 ? 1  : 0    propList.push(prop)this.checkPropertyList.push(item)}})}
})

最后发现还是不可以,于是我尝试 this.$set() 就可以了,是因为 v-model 需要双向绑定,而 this.$set() 则是启用了动态绑定

将上面代码的
item.optionAlias = ""
item.optionSort = ""改成
this.$set(item,'optionAlias',"")
this.$set(item,'optionSort',"")

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

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

相关文章

网页视频下载工具 iTubeGo mac中文版软件特色

iTubeGo YouTube Downloader mac是一款功能强大的YouTube视频下载工具。 iTubeGo YouTube Downloader mac软件特色 多种格式支持&#xff1a;iTubeGo YouTube Downloader可以将YouTube视频下载为多种常见的视频和音频格式&#xff0c;包括MP4、MP3、AVI、FLV、MOV、WMV等&…

【Android】Android Framework系列--CarUsbHandler源码分析

Android Framework系列–CarUsbHandler源码分析 本文基于Android12源码。 CarUsbHandler是Android Car提供的服务之一&#xff0c;其用车载USB连接的场景。 车载USB有其特殊应用场景&#xff0c;比如AndroidAuto、CarLife等。而Android的做法是在其原有的USB服务上&#xff0…

使用html2canvas转换table为图片时合并单元格rowspan失效,无边框显示问题解决(React实现)

最近使用 html2canvas导出Table表单为图片&#xff0c;但是转换出的图片被合并的单元格没有显示边框 查了原因是因为我为tr设置了背景色&#xff0c;然后td设置了rowspan&#xff0c;设置了rowspan的单元格就会出现边框不显示的问题。 解决方法就是取消tr的背景色&#xff0c;然…

力扣 hot100 最长连续序列 哈希去重 双指针

128. 最长连续序列 ⭐ AC code class Solution {public int longestConsecutive(int[] nums) {if (nums.length 0)// 特判为空的数组&#xff0c;返回0return 0; // set实现去重HashSet<Integer> set new HashSet<>();for (int x : nums)set.add(x);Object[] a…

Kafka(四)消费者消费消息

文章目录 如何确保不重复消费消息&#xff1f;消费者业务逻辑重试消费者提交自定义反序列化类消费者参数配置及其说明重要的参数session.time.ms和heartbeat.interval.ms和group.instance.id增加消费者的吞吐量消费者消费的超时时间和poll()方法的关系 消费者消费逻辑启动消费者…

ExcelBDD PHP Guideline

在PHP里面支持利用Excel的BDD&#xff0c;也支持利用Excel进行参数化测试 ExcelBDD Use Excel file as BDD feature file, get example data from Excel files, support automation tests. Features The main features provided by this library are: Read test data acco…

【win32_001】win32命名规、缩写、窗口

整数类型 bool类型 使用注意&#xff1a; 一般bool 的false0&#xff1b;true1 | 2 | …|n false是为0&#xff0c;true是非零 不建议这样用&#xff1a; if (result TRUE) // Wrong! 因为result不一定只返回1&#xff08;true&#xff09;&#xff0c;当返回2时&#xff0c…

集合框架面试题

一、集合容器的概述 1. 什么是集合 集合框架&#xff1a;用于存储数据的容器。 集合框架是为表示和操作集合而规定的一种统一的标准的体系结构。 任何集合框架都包含三大块内容&#xff1a; 对外的接口、接口的实现和对集合运算的算 法。 接口&#xff1a;表示集合的抽象数据…

鸿蒙:实现两个Page页面跳转

效果展示 这篇博文在《鸿蒙&#xff1a;从0到“Hello Harmony”》基础上实现两个Page页面跳转 1.构建第一个页面 第一个页面就是“Hello Harmony”&#xff0c;把文件名和显示内容都改一下&#xff0c;改成“FirstPage”&#xff0c;再添加一个“Next”按钮。 Entry Compone…

Axure9 基本操作(二)

1. 文本框、文本域 文本框&#xff1a;快速实现提示文字与不同类型文字显示的效果。 2. 下拉列表、列表框 下拉列表&#xff1a;快速实现下拉框及默认显示项的效果。 3. 复选框、单选按钮 4. 利用动态面板实现同个按键的不同状态切换

Codewhisperer 使用评价

最近亚⻢逊推出了一款基于机器学习的 AI 编程助手 Amazon CodeWhisperer&#xff0c;可以实时提供代码建议。在编写代码时&#xff0c;它会自动根据现有的代码和注释给出建议。Amazon CodeWhisperer 与GitHub Copilot类似&#xff0c;主要的功能有: 代码补全注释和文档补全代码…

图像分类(四) 全面解读复现GoogleNet_InceptionV1-V4

论文解读 InceptionV1 前言 论文题目: Going Deeper with Convolutions Googlenet论文原文地址:https://arxiv.org/pdf/1409.4842.pdf 之前看过VGG的论文&#xff08;VGG精读直达&#xff09;。当时VGG获得了 2014 ILSVRC 图像分类的第二名&#xff0c;今天来看一下第一名…

Linux | 进程间通信

目录 前言 一、进程间通信的基本概念 二、管道 1、管道的基本概念 2、匿名管道 &#xff08;1&#xff09;原理 &#xff08;2&#xff09;测试代码 &#xff08;3&#xff09;读写控制相关问题 a、读端关闭 b、写端关闭 c、读快写慢 d、读慢些快 &#xff08;4&a…

Linux 系统编程,Binder 学习,文件访问相关的接口

文章目录 Linux 系统编程&#xff0c;Binder 学习&#xff0c;文件访问相关的接口1.概念2.linux文件结构3.文件描述符4.Linux文件系统的两类常用接口&#xff0c;linux系统内置库函数4.1 open4.2 close4.3 read4.4 write 5.标准I/O库函数5.1 fopen Linux 系统编程&#xff0c;B…

NewStarCTF2023 Reverse Week3 EzDLL WP

分析 这里调用了z3h.dll中的encrypt函数。 用ida64载入z3h.dll 直接搜索encrypt 找到了一个XTEA加密。接着回去找key和密文。 发现key 这里用了个调试状态来判断是否正确&#xff0c;v71&#xff0c;要v7&#xff1d;1才会输出Right&#xff0c;即程序要处于飞调试状态。 可…

一、MySQL-Replication(主从复制)

1.1、MySQL Replication 主从复制&#xff08;也称 AB 复制&#xff09;允许将来自一个MySQL数据库服务器&#xff08;主服务器&#xff09;的数据复制到一个或多个MySQL数据库服务器&#xff08;从服务器&#xff09;。 根据配置&#xff0c;您可以复制数据库中的所有数据库&a…

ESP32 Arduino实战协议篇-搭建独立的 Web 服务器

在此项目中,您将创建一个带有 ESP32 的独立 Web 服务器,该服务器使用 Arduino IDE 编程环境控制输出(两个 LED)。Web 服务器是移动响应的,可以使用本地网络上的任何浏览器设备进行访问。我们将向您展示如何创建 Web 服务器以及代码如何逐步工作。 项目概况 在直接进入项目…

基于机器学习的居民消费影响因子分析预测

项目视频讲解: 基于机器学习的居民消费影响因子分析预测_哔哩哔哩_bilibili 主要工作内容: 完整代码: import pandas as pd import numpy as np import matplotlib.pyplot as plt import seaborn as sns import missingno as msno import warnings warnings.filterwarnin…

驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接

参考&#xff1a;https://www.cnblogs.com/sam-snow-v/p/15917898.html eclipse链接SQL Server出现问题 笔者使用Open JDK 17&#xff0c;SQL Server 2016&#xff0c;项目中使用JPA操作数据库。测试环境没问题&#xff0c;生产环境出现如题所示“驱动程序无法通过使用安全套接…

qsort函数使用方法总结

目录 一、qsort函数原型 二、compar参数 三、各种类型的qsort排序 1. int 数组排序 2. 结构体排序 3. 字符串指针数组排序 4. 字符串二维数组排序 四、回调函数 1. 什么是回调函数 2. 为什么要用回调函数&#xff1f; 3. 怎么使用回调函数&#xff1f; 4.下面是…