详解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项目里就能看到效果

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

<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的时候，会可能出问题(暂时先不讨论这种情况)

原文地址：https://www.cnblogs.com/hudayang2008/p/9813336.html

时间： 2024-11-08 13:30:53

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

详解-vue项目中的文件和目录

可以用vue-cli来支持一个项目. 建议使用npm 3+更高效的依赖关系树: $ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev 项目结构: . ├── build/ # webpack配置文件 │ └── ... ├── config/ │ ├── index.js # 主要项目配置 │ └── ... ├── src/ │ ├── main.js

Android菜单详解——理解android中的Menu

Android菜单详解--理解android中的Menu 前言 今天看了pro android 3中menu这一章,对Android的整个menu体系有了进一步的了解,故整理下笔记与大家分享. PS:强烈推荐<Pro Android 3>,是我至今为止看到的最好的一本android书,中文版出到<精通Android 2>. 理解Android的菜单 菜单是许多应用程序不可或缺的一部分,Android中更是如此,所有搭载Android系统的手机甚至都要有一个"Menu&qu

详解vue 路由跳转四种方式 (带参数)

详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1. 不带参数  <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name /

Icehouse版keystone配置完全详解（更新中）

本文全面解读Icehouse发行版keystone的配置文件keystone.conf [DEFAULT]admin_token=(string value)# 这是一个公知的密码,用于初始化keystone,强烈建议在生产模式中禁用,只需要在# keystone-paste.ini文件中移除AdminTokenAuthMiddleware这个pipeline即可 public_bind_host=(string value)# The IP Address of the network int

详解WebService开发中四个常见问题(1)

详解WebService开发中四个常见问题(1) WebService开发中经常会碰到诸如WebService与方法重载.循环引用.数据被穿该等等问题.本文会给大家一些很好的解决方法. AD:WOT2014:用户标签系统与用户数据化运营培训专场 任何问题都需要从它的根源说起,所以简单说一下WebService的工作原理.客户端调用一个WebService的方法,首先需要将方法名和需要传递的参数包装成XML(也就是SOAP包),通常是通过HTTP传递到服务器端,然后服务器端解析这段XML,得到被调

详解WebService开发中四个常见问题(2)

详解WebService开发中四个常见问题(2) WebService开发中经常会碰到诸如WebService与方法重载.循环引用.数据被穿该等等问题.本文会给大家一些很好的解决方法. AD:WOT2014:用户标签系统与用户数据化运营培训专场 问题三:循环引用 还是先来看一个例子.下面是WebService的接口: 1 @WebService2     public interface IHello {3     4         @WebMethod5         public Str

详解Http请求中Content-Type讲解以及在Spring MVC中的应用

详解Http请求中Content-Type讲解以及在Spring MVC中的应用 引言: 在Http请求中,我们每天都在使用Content-type来指定不同格式的请求信息,但是却很少有人去全面了解content-type中允许的值有多少,这里将讲解Content-Type的可用值,以及在spring MVC中如何使用它们来映射请求信息. 1.  Content-Type MediaType,即是Internet Media Type,互联网媒体类型:也叫做MIME类型,在Http协议消息头中,

详解 MySql InnoDB 中的三种行锁（记录锁、间隙锁与临键锁）

详解 MySql InnoDB 中的三种行锁(记录锁.间隙锁与临键锁) 前言 InnoDB 通过 MVCC 和 NEXT-KEY Locks,解决了在可重复读的事务隔离级别下出现幻读的问题.MVCC 我先挖个坑,日后再细讲,这篇文章我们主要来谈谈那些可爱的锁. 什么是幻读? 幻读是在可重复读的事务隔离级别下会出现的一种问题,简单来说,可重复读保证了当前事务不会读取到其他事务已提交的 UPDATE 操作.但同时,也会导致当前事务无法感知到来自其他事务中的 INSERT 或 DELETE 操作,这就

[顶]ORACLE PL/SQL编程详解之二：PL/SQL块结构和组成元素(为山九仞，岂一日之功)

原文:[顶]ORACLE PL/SQL编程详解之二:PL/SQL块结构和组成元素(为山九仞,岂一日之功) [顶]ORACLE PL/SQL编程详解之二: PL/SQL块结构和组成元素(为山九仞,岂一日之功) 继上四篇:ORACLE PL/SQL编程之八:把触发器说透                ORACLE PL/SQL编程之六:把过程与函数说透(穷追猛打,把根儿都拔起!)                [推荐]ORACLE PL/SQL编程之四:把游标说透(不怕做不到,只怕想不到) [推荐]