vue3+ Element-Plus 点击勾选框往input中动态添加多个tag

news2024/11/23 12:55:53

实现效果:

在这里插入图片描述

template:

          <!--产品白名单-->
          <div class="con-item" v-if="current == 0">

            <el-form-item label="平台名称">

              <div class="contaion" @click="onclick">

                <!-- 生成的标签 -->
                <div v-for="(item, index) in uniqueArray" :key="index" class="spanbox">
                  <span class="tagspan">{{ item }}</span>
                  <i class="iClose" @click="removeTag(item,index)"></i>
                </div>
                <!-- 输入框 -->
                <input
                  v-model="inputValue"
                  :style="inputStyle"
                  class="inputTag"
                  ref="inputTag"
                  type="text"
                />

              </div>

            </el-form-item>

            <el-table v-loading="loading" :data="dialogWhitelist" @selection-change="handleSelectionChange">
              <el-table-column label="ID" align="center" prop="id" />
              <el-table-column label="平台名称" align="center" prop="platformName" />
              <el-table-column label="展业模式" align="center" prop="promoteMode" />
              <el-table-column label="产品" align="center" prop="productName" />
              <el-table-column type="selection" width="55" align="center" />
            </el-table>  
          </div>

主要是这一块代码:

v-for 遍历 uniqueArray数组 显示一个个tag,每一个tag后面有一个清除图标和removeTag事件。

              <div class="contaion" @click="onclick">

                <!-- 生成的标签 -->
                <div v-for="(item, index) in uniqueArray" :key="index" class="spanbox">
                  <span class="tagspan">{{ item }}</span>
                  <i class="iClose" @click="removeTag(item,index)"></i>
                </div>
                <!-- 输入框 -->
                <input
                  v-model="inputValue"
                  :style="inputStyle"
                  class="inputTag"
                  ref="inputTag"
                  type="text"
                />

              </div>

script

const deepTagsAll = ref([]);//没有去重的数组
const inputValue = ref("");

  //点击叉叉删除tag
function removeTag(item,index) {
  this.deepTagsAll.splice(index, 1);
}

watch(//监听input框长度
  () => inputValue.value.length,
  (newLength, oldLength) => {
    console.log(`Input length changed from ${oldLength} to ${newLength}`);
    // 这里可以根据长度变化执行相应的逻辑
    // 实时改变input输入框宽度,防止输入内容超出input默认宽度显示不全
    inputLength = $refs.inputTag.value.length * 12 + 50;
  }
);

//计算属性 去重复
const uniqueArray = computed(() => [...new Set(deepTagsAll.value)]);

/** 产品白名单多选框选中数据 */
function handleSelectionChange(selection) {
  var newArr=Array.from(selection);
  for (let i = 0; i < newArr.length; i++) {
    const newRow = {
      businesId: newArr[i].id,
      platformName: newArr[i].platformName,
      exhibitionMode: newArr[i].promoteMode,
      productName: newArr[i].productName
  }
  selectWhitelist.value.push(newRow)// 往list中放一个空对象
  //添加tag
  deepTagsAll.value.push(newArr[i].platformName)
  }

把每一个勾选的值放到deepTagsAll数组里面,由于可能出现选完了再选一次的情况,所以添加一个computed 给数组去重复放到uniqueArray 数组里面

style

<style  scoped>
  .contaion {
  width: 600px;
  box-sizing: border-box;
  background-color: white;
  border: 1px solid #409EFF;
  border-radius: 4px;
  font-size: 12px;
  text-align: left;
  padding-left: 5px;
  word-wrap: break-word;
  overflow: hidden;
  }
  /* 标签 */
  .spanbox {
  display: inline-block;
  font-size: 14px;
  margin: 3px 4px 3px 0;
  background-color: #ecf5ff;
  border: 1px solid #e8eaec;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
  /* 标签文字 */
  .tagspan {
  height: 24px;
  line-height: 22px;
  max-width: 99%;
  position: relative;
  display: inline-block;
  padding-left: 8px;
  color: #409EFF;
  font-size: 14px;
  opacity: 1;
  vertical-align: middle;
  overflow: hidden;
  transition: 0.25s linear;
  }
  /* tag的叉叉 */
  .iClose {
  padding: 0 6px 0 4px;
  opacity: 1;
  -webkit-filter: none;
  filter: none;
  color: #409EFF;
  /* font-weight: 600; */
  cursor:pointer;
  }
  /* 鼠标经过叉叉 */
  .iClose:hover{
  background-color: #409EFF;
  border-radius: 50%;
  color: #fff;
  }
  .iClose:after {
  content: "\00D7";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* line-height: 27px; */
  transition: 0.3s, color 0s;
  }
  /* input */
  .inputTag {
  font-size: 16px;
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  width: auto;
  min-width: 150px;
  vertical-align: top;
  height: 32px;
  color: #495060;
  line-height: 32px;
  }
  /* 输入框提示文字大小 */
  input:placeholder-shown {
  font-size: 10px;
  }

</style>

这块存放tag的是一个虚拟的边框,所以.contaion这个样式不能丢。
在这里插入图片描述

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

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

相关文章

六西格玛培训都培训哪些内容 ?

天行健六西格玛培训的内容通常涵盖多个方面&#xff0c;旨在帮助学员全面理解和应用六西格玛管理方法。以下是详细的培训内容概述&#xff1a; 一、六西格玛基础知识 引入六西格玛的概念、原理和历史&#xff0c;包括DMAIC&#xff08;定义、测量、分析、改进、控制&#xff0…

轻松搭建,一键开发,MemFire Cloud:懒人开发者的创意神器

在如今快节奏的时代&#xff0c;对于开发者来说&#xff0c;时间就是金钱。但是&#xff0c;要想快速开发一个应用&#xff0c;却需要花费大量时间搭建服务、开发接口、集成认证等等&#xff0c;这无疑增加了开发者的工作负担。但现在&#xff0c;有了MemFire Cloud&#xff0c…

Petalinux由于网络原因产生的编译错误(2)--Fetcher failure:Unable to find file

1 Fetcher failure:Unable to find file 错误 如果编译工程遇到如下图所示的“Fetcher failure for URL”或相似错误 出现这种错误的原因是 Petalinux 在配置和编译的时候&#xff0c;需要联网下载一些文件&#xff0c;由于网 络原因这些文件不能正常下载&#xff0c;导致编译…

分享一些经典的国外二维码活动案例,含二维码制作技巧

二维码具有信息容量大、编码范围广、自由度高、容错能力强、保密性、防伪性好、译码可靠性高等多项优势&#xff0c;所以二维码应用极其广泛&#xff0c;它作为一种及时、准确、可靠、经济的数据输入手段&#xff0c;已在工业、商业、交通、金融、医疗卫生、办公自动化等许多领…

Python发送Outlook邮件的步骤流程有哪些?

Python发送Outlook邮件的技巧&#xff1f;如何使用Python发信&#xff1f; 在Python中使用SMTP协议发送邮件到Outlook邮箱是一项常见的任务。AokSend将介绍如何通过Python编程语言实现这一过程&#xff0c;从准备工作到实际发送邮件的具体步骤。 Python发送Outlook邮件&#…

Beyond Compare 提示“缺少评估信息或损坏”,无法打开只要操作一行命令就可以了

在CMD 或者powershell下执行如下命令重新打开即可。 reg delete "HKEY_CURRENT_USER\Software\Scooter Software\Beyond Compare 4" /v CacheID /f重新打开&#xff0c;就ok 了

工业交换机的供电功率配置

在工业领域中&#xff0c;交换机作为网络设备中的重要组成部分&#xff0c;其供电功率配置必不可少。工业交换机的供电功率配置不仅关系到设备的稳定运行&#xff0c;还直接影响到整个工业生产系统的效率和安全性。因此&#xff0c;在选择工业交换机时&#xff0c;必须对供电功…

无需插件脚本,IDEA配置多服务一键启动

分享本教程的初衷是本人在本地调试时业务场景中需要调用多个服务&#xff0c;并且每次为了找到需要启动的服务花了很多不必要的时间&#xff0c;我相信很多同为开发的小伙伴也有和我一样的困扰。但是学会这招后多个服务需要同时启动时仅需一键即可搞定。接下来让我们一步步设置…

科普趣味知识API:探索奇妙世界

开发者必备科普知识类API是一种不可或缺的资源&#xff0c;为开发者们提供了广泛的科学和技术知识&#xff0c;帮助他们在软件开发过程中更全面地理解和应用技术。这个API涵盖了多个领域的科普知识&#xff0c;包括计算机科学、网络安全、人工智能、数据科学等等。通过使用这个…

1. NAS和SAN存储

NAS和SAN存储 一、存储设备1、根据工作方式2、DAS 直接附加存储3、NAS存储4、SAN存储 二、模拟配置SAN存储1、创建虚拟机、安装openfiler2、访问openfiler webUI3、创建RAID设备4、开启iSCSI服务5、配置SAN存储设备共享空间5.1 设置IQN 6、业务服务器连接使用存储6.1 安装客户端…

Illustrator 2024 mac/win版:创新设计,一触即发

Illustrator 2024是一款由Adobe公司开发的强大且全面的矢量图形设计软件&#xff0c;它以其卓越的性能和丰富的功能&#xff0c;为设计师们提供了一个高效、直观且富有创意的工作环境。 Illustrator 2024 mac/win版获取 作为一款矢量图形设计软件&#xff0c;Illustrator 2024…

减治法思想-二分查找图解案例

减治法介绍 减治法思想 ​ 分治法是将一个大问题划分为若干个子问题&#xff0c;分别求各个子问题&#xff0c;然后把子问题的解进行合并得到原问题的解。 ​ 减治法同样是把一个大问题划分为若干个子问题&#xff0c;但是并不是求解所有的子问题&#xff0c;因为原问题的解…

CID引流电商下的3C产品选品策略深度解析

​摘要&#xff1a;随着电商行业的迅猛发展和消费者需求的日益多样化&#xff0c;CID引流电商作为一种新兴的电商模式&#xff0c;逐渐受到了广泛关注。在这一模式下&#xff0c;3C产品作为高客单价、高技术含量的代表品类&#xff0c;其选品策略的制定显得尤为重要。本文将从多…

IDEA 高效插件工具

文章目录 LombokMaven Helper 依赖冲突any-rule(正则表达式插件)快速生成javadocGsonFormat (Aits) 将json解析成类Diagrams使用 类图SequenceDiagram时序图GenerateAllSetter&#xff08;AltEnter&#xff09;大小写转写String ManipulationGitToolBox 代码提交人activate-pow…

KEYSIGHT N1000A与KEYSIGHT 86100D 区别?

N1000A与86100D设计理念和应用领域 N1000A&#xff1a;N1000A是一款宽带宽示波器主机&#xff0c;主要用于高速数字设计的精确测量&#xff0c;从50 Mb/s到超过80 Gb/s。它适用于光收发机设计和生产测试、ASIC/FPGA/IC设计和表征、串行总线设计、电缆和印刷电路板&#xff08;P…

你项目用到了 Dubbo,讲讲为什么要用以及怎么使用的?

引言&#xff1a;在现代分布式系统中&#xff0c;服务化架构已成为构建高性能、可扩展和可靠系统的关键。 Dubbo 作为一种优秀的服务化框架&#xff0c;提供了丰富的特性和灵活的配置选项&#xff0c;使得它在业界得到了广泛的应用和认可。本文将探讨为什么选择 Dubbo 以及如何…

贪心+构造,CF1153 C. Serval and Parenthesis Sequence

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 1153C - Codeforces 二、解题报告 1、思路分析 对于括号匹配问题我们经典做法是左括号当成1&#xff0c;右括号当成-1 那么只要任意前缀非负且最终总和为0那么该括号序列就是合法 对于本题&…

ssm学生成绩管理系统-海豚

ssm学生成绩管理系统-海豚 ssm学生成绩管理系统。 功能:登录&#xff0c;学生信息管理&#xff0c;课程信息&#xff0c;成绩信息&#xff0c; 技术&#xff1a;java&#xff0c;ssm&#xff0c;mybatics&#xff0c;jsp 平台&#xff1a;eclispe或者idea&#xff0c;mysql5.7…

spring-data-mongodb版本兼容问题

spring-data-mongodb与mongodb驱动有兼容性问题&#xff0c;不匹配会报NoSuchMethod异常&#xff0c;mongodb的java驱动包在4.0之后由mongodb-java-driver更名为mongodb-driver-sync。 spring-data-mongodb包依赖中有mongodb-driver-core&#xff0c;但缺诸如MongoCollection等…

vue3实战练习之红包雨,抢红包案例

抢红包案例 每当618消费节到来时&#xff0c;某宝、某多&#xff0c;等购物网站都会退出各种活动&#xff0c;其中抢红包&#xff0c;优惠券等红包雨活动很是火热&#xff0c;于是就通过vue的知识来做一个红包雨&#xff0c;抢红包加分活动&#xff01;代码中红包的路径改成自己…