详解Vue Elementui中的Tag与页面其它元素相互交互的两三事

前言

公司系统在用elementui做后台开发,不免遇到一些需要自己去根据原有的功能上,加一些交互的功能。
今天来介绍下我在用elementUi里的Tag标签与多选框交互的过程,东西听上去很简单,但就是越简单的东西越容易出一些问题。官方tag文档:elementUi-tag标签

效果图:

思路

一、多选框勾选,出现对应的tag:

1.利用watch监听多选框绑定的值A(数组)的变化;
2.根据A的变化,循环拿到勾选多选框的id对应的name,将id以及对应的name组成新的对象数组;
3.将上一步得到的对象数组,去重(产品要求,出现的tag里不能有重复的)得到结果B;
4.将B赋值给tags,循环展示出来;

二、点击tag上的删除按钮,删除当前的tag,并将对应勾选的多选框取消勾选:

1.点击tag删除的按钮的时候,拿到当前tag的id C;
2.执行方法,去除掉A里的C;
3.watch事件重新进入到第一步的方法;

总结:监听多选框对应的model A,根据A的变化,取到对应的id与name,赋值给tag作展示,tag的删除事件反过来在去控制A的变化,重新进入watch事件里的方法

听起来挺简单,思路大概也明确,先讲上述思路对应的代码,后边再讲遇到的问题、坑

代码

复制整一块代码到你的elementUi项目里就能看到效果

<template>
 <div>
 <el-row type="flex" justify="bettwen">
  <el-col :span="15">
  <!-- 表单 -->
  <el-form :model="tempForm" ref="tempForms">
   <el-form-item label="请选择人员">
   <!-- 多选人员 -->
   <el-checkbox-group v-model="tempForm.checkboxGroup5" size="small">
    <el-checkbox border v-for="(item,index) in checkBox" @change="perChange(item)" :label="item.id" :key="index">{{item.name}}</el-checkbox>
   </el-checkbox-group>
   <!-- 多选人员 end-->
   </el-form-item>
  </el-form>
  <!-- 表单 end-->
  <!-- tag展示区 -->
  <el-row>
   <el-tag class="tagClass" v-for="(tag,index) in tags" :key="index" closable @close="handleClose(tag)" :type="tag.id">
   {{tag.name}}
   </el-tag>
   <el-button v-if="tags.length>0" @click="clearAll" plain>全部删除</el-button>
  </el-row>
  <!-- tag展示区 end-->
  </el-col>

 </el-row>
 </div>
</template>
<script>
export default {
 name: 'kk',
 mounted() {},
 data() {
 return {
  msg: 'Welcome to Your Vue.js App',
  tags: [],
  tempForm: {
  checkboxGroup5: [], //选择的人员
  },
  detailData: [],
  checkBox: [{
   name: '小红',
   id: '101'
  },
  {
   name: '小黄',
   id: '100'

  }, {
   name: '小明',
   id: '102'

  }, {
   name: '小明',
   id: '102'

  }
  ],

 }
 },
 methods: {
 clearAll() { //全部清空数据
  this.tags = []
  this.tempForm.checkboxGroup5 = []
 },
 perChange(item) {
  this.detailData.push(item)
 },
 handleClose(tag) { //标签的删除事件
  // 去掉当前删除的tag
  let yourChoseTags = this.tempForm.checkboxGroup5

  this.tempForm.checkboxGroup5 = yourChoseTags.filter(item => {
  if (tag.id !== item) {
   return true
  }
  })

 },
 delRepeat(arr) { //数组对象去重
  return Object.values(
  arr.reduce((obj, next) => {
   var key = JSON.stringify(next);
   return (obj[key] = next), obj;
  }, {}),
  );
 },
 moreArr() {
  let yourChose = this.tempForm.checkboxGroup5
  let tempTags = []

  tempTags = this.baseDataDetail(yourChose, this.checkBox, tempTags)
  this.detailData = tempTags
 },
 baseDataDetail(yourChose, baseData, callBack) { //封装的数组方法
  let temp = callBack
  // 循环两个数据拿到选择的checkbox的id对应的初始数据
  yourChose.forEach(item => {
  baseData.forEach(itemSecond => {
   if (item === itemSecond.id) {
   temp.push(itemSecond)
   }
  })
  })
  return temp
 },

 },
 watch: {
 detailData() {
  let tempArr = Object.assign([], this.detailData)
  tempArr = this.delRepeat(tempArr)
  // console.log(tempArr)
  this.tags = tempArr
 },
 "tempForm.checkboxGroup5" () {
  this.moreArr()
 },
 }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tempArea {
 /*width: 100%;*/
}
.tagClass{
 margin-right: 10px;
}

</style>

值得注意的点:

1.我在多选框绑定值tempForm.checkboxGroup5的监听事件里的方法的最后,得到了一个可能会有重复数据(重复id跟name),再将这个含有重复数据数组对象赋值给另一个数组detailData,在watch监听这个数组,去完重后,赋值给tags做展示。
为什么这样做,是因为,我们的需求里,除了在当前页面多选框选择人员,还有一个选择全公司员工的组件,这样不管从哪个渠道选择的人员都能最后将结果指向detailData,保证渲染正确

2.数组对象去重,初始数据里可能会有重id、重名的对象(小明),即便绑定多选框的model值里不会有重复的id,但在 利用id取对应name的时候,还是会检测出多条,这样tag就可能会显示重复的
所以利用这个方法,就能保证最后处理好的数据没有重复的,tag不会显示多个一样的,
但这个方法有点不灵活的地方就是,你要处理的数据({id:1,name:'小明',type:now})必须id、name,type都重复的时候,才会被去重,
拓展:可根据你设置的数组对象里的某个属性动态去重

3.我一开始是在多选框的change事件上来做tag的展示逻辑,因为change事件里可以同时拿到当前选择的name和id,但是,change的时候,你不知道这是在勾选还是在取消勾选,这样tags的展示就会出问题;

这个逻辑可能不太完美,因为有可能你的人员是从其他组件里选来的,所以当你删除tag的时候,会可能出问题(暂时先不讨论这种情况)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue+ElementUI实现订单页动态添加产品数据效果实例代码

    这两天学习了ElementUI基于vue2.0开发学习,这个知识点挺多的,而且很重要,所以,今天添加一点小笔记. 使用vue2.0(ElementUI基于vue2.0)+ElementUI(饿了么出品)实现的在订单页面动态添加产品的效果,并自动计算总价.代码直接保存为html文档,使用浏览器打开即可查看效果. 效果图: <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-U

  • 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)

    1. 根据官方指引,构建项目框架 # 安装vue $ cnpm install vue@2.1.6 # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目my-project $ vue init webpack my-project # 进入项目目录 $ cd my-project # 安装依赖,走你 $ cnpm install # 运行项目 $ cnpm run dev 2. 运行项目之后,会看到以下界面

  • Vue+ElementUI实现表单动态渲染、可视化配置的方法

    动态渲染就是有一个异步的数据,大概长这样: { "inline": true, "labelPosition": "right", "labelWidth": "", "size": "small", "statusIcon": true, "formItemList": [ { "type": "

  • VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    先看看ElementUI里关于el-table的template数据结构: <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-tabl

  • 基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

    前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单是可新增的,所以要遍历生成: 2.联系方式(手机/座机)的切换,是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,

  • vue使用ElementUI时导航栏默认展开功能的实现

    本文主要参考: http://element.eleme.io/#/zh-CN/component/menu 在使用elementUI的时候发现,能够展开的导航栏是不能展开的,效果这里先不演示了.可以在上边的网站上看到. 现在有这样的需求,就是说,默认的时候需要展开这些导航,就是一打开界面的时候就能够显示导航里面的菜单内容. 具体操作是这样的: <script src="//unpkg.com/vue/dist/vue.js"></script> <scr

  • elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)

    在做后台管理系统中遇到一个需求, 点击一个按钮可以变换里面字的内容 当状态为显示的时候, 该行第一个按钮为隐藏; 当状态为隐藏的时候, 该行第一个按钮为显示; 具体代码如下: <!-- 数据表格 --> <el-table :data="tableData" class="table" stripe border v-loading="loading"> <el-table-column type="ind

  • 详解VUE Element-UI多级菜单动态渲染的组件

    以下是组件代码: <template> <div class="navMenu"> <label v-for="navMenu in navMenus"> <el-menu-item v-if="navMenu.childs==null&&navMenu.entity&&navMenu.entity.state==='ENABLE'" :key="navMenu.

  • Vue ElementUI之Form表单验证遇到的问题

    首先说一下 我在form表单里面遇见的坑: 1.例如我要给后台传的不是对象,而是一个数组,怎么写验证? 2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且一定要与当前弹框的确定或者保存按钮一一对应,例如:第一个弹框的ref='number',按钮的click比如为xxxxxx('number'),第二个弹出框的ref='number2',对应的按钮>>xxxxxx('number2').如果ref用的都一样,就会出现,点击下一步我没有去做验证,我再

  • Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)

    在上篇文章给大家介绍了Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一),接下来我们添加分页相关的依赖,时间紧张,直接上代码了,贴上我的pom文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=

随机推荐