ElementUI之el-tag标签移除

最新推荐文章于 2023-08-29 02:44:30 发布

梓涵999

最新推荐文章于 2023-08-29 02:44:30 发布

阅读量2.2k

点赞数

分类专栏： ElementUi 文章标签： elementui javascript

本文链接：https://blog.csdn.net/qq_61553794/article/details/126507480

版权

ElementUi 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js应用中利用Element UI的El-Tag组件动态管理标签。通过`v-for`指令遍历tags数组并显示标签，同时实现标签关闭功能，当点击关闭按钮时，使用`indexOf`方法找到标签在数组中的位置，并用`splice`方法从数组中移除。

摘要由CSDN通过智能技术生成

  <el-tag v-for="tag in tags" :key="tag.id" closable type="info" @close="handleClose(tag)">
            {{tag.name}}
  </el-tag>


  data中定义的数组     tags：[]
      


    // 标签删除
    handleClose (tag) {
      const item = this.tags.indexOf(tag)
      index.Of()  返回某个元素在数组中的位置
      this.tags.splice(item, 1)
    },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

梓涵999

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

element ui el-tag的使用

weixin_53898445的博客

12-28

3155

效果展示代码 <el-form-item label="颜色"> <el-tag :key="tag.name" v-for="tag in form.colors" closable :disable-transitions="false" @close="handleClose(tag)"> {{tag.name}} </el-tag> <el-input class="input-n.

vue+elementui实现el-select全选反选

咬耳朵小布丁

06-12

3200

#vue实现el-el-select多选全选反选实现的功能： 1、多选 2、选择【全选】时多选数据及反选 3、数据全部勾选时【全选】勾选，全选情况下去除一个选项【全选消失】 <el-select v-model="orgData" size="small" multiple collapse-tags @change="selectAll" @remove-ta

参与评论您还未登录，请先登录后发表或查看评论

108.(前端)分类管理删除值实现——¶elementui可移除标签

m0_63953077的博客

11-01

924

elementui可移除标签

使用el-tag和el-select组件实现标签的增删

热门推荐

charming的博客

04-30

3万+

基于element-ui的级联多选选择器，友好显示下拉箭头，样式与element一致，支持多选与级联选择器的大部分功能。在线demo github地址（含更新日志） npm地址效果预览 install 安装 npm i el-cascader-multi --save use 使用在main.js中写入下面的代码 import elCascaderMulti from "el-cas...

elementui之el-tabs，自定义tab，可增加、移除tab页

baidu_39084727的博客

04-28

1万+

效果图如下，主要实现tab页的新增、删除功能，点击删除按钮时若删除对象为最后一个tab页则取消之。根据官网的文档，可以使用组件中的事件来实现这一功能，但是增加的按钮位置不是我们想要的，删除时也无法保留最后一个tab页，这些需要我们自己改写一下。代码实现： <el-tabs v-model="editableTabsValue" type="card" @tab-click="clickTab" @tab-remove="removeTab" :before-leave="beforeLea

vue+ElementUI实现Tag的增删改等功能

qq_43474235的博客

09-19

1260

vue+ElementUI实现Tag的增删改等功能

为tag标签增加删除的小图标

weixin_45544534的博客

05-20

1251

首先为标签添加一个closable属性，就变成了可移除的标签。基础标签后面没有小叉号，可移除的标签后面有一个小叉号，，添加closable属性后，如下图所示。 tag标签上提供了一个close事件，当我们单击后面的叉号小图标后，会立即相应close事件处理函数所以我们要为其绑定一个事件处理函数removeRightById。然后在methods中定义该函数，最后在该事件处理函数中弹框提示用户是否确定删除。点击确定按钮的时候，根据规定的请求路径和方法删除权限，此处的请求路径为反引号内的路径，

tag标签实现关闭左侧、关闭右侧、关闭其他、全部关闭标签的功能

m0_51041905的博客

11-17

1829

2.效果说明现在有四个tag标签（tag1，tag2，tag3，tag4），如下图，选中的是tag2标签，我们需要新增一个按钮实现关闭tag2左侧标签，关闭tag2右侧标签，关闭除了tag2以外的其他标签，关闭全部标签(回到home页) 四个tag标签存放在pageTags数组里 pageTags:[ { path: '/tag1', name: 'tag1', }, { .

elementUI之tag标签讲解

夏日漱石的博客

05-21

4277

elementUI之tag标签讲解

ElementUI Tag标签的一些问题及解决方法

不知名人士的博客

03-29

4185

ElementUI Tag 标签

【VUE项目实战】48、参数下可选项的增删改

程序猿之洞

05-01

1423

接上篇《47、渲染参数下的可选项》上一篇我们完成了参数下可选项的渲染，本篇我们来完成可选项的添加和删除。一、添加按钮与文本框的切换显示我们要实现点击添加按钮后，变成一个文本框的效果：逻辑是点击添加按钮后，按钮切换为一个input文本框，而input文本框失去焦点之后，则会变回添加按钮。我们通过v-if和v-else和一个boolean值就可以轻松实现。添加按钮我们可以通过element-UI官网el-tag提供的动态编辑效果来实现：官方实现代码： <el-tag :key=.

使用elementUI的el-tag实现菜单tab标签，实现右键菜单关闭当前，关闭其他、关闭全部以及超出长度是隐藏并可左右滑动功能。

徐忠炜的博客

08-25

1万+

1. 效果展示

Tag标签的增加和删除功能

weixin_46370867的博客

02-06

1394

效果图： html  <el-table-column type="expand"> <template slot-scope="scope">   <!-- item 循环出来的每一项 --

组件-Element---Tag （标签）

GU_AO_SHI_TAI_DU的博客

07-03

1万+

组件-Element—Tag （标签）组件—标签基础用法 <el-tag>标签一</el-tag> <el-tag type="success">标签二</el-tag> <el-tag type="info">标签三</el-tag> <el-tag type="warning">标签四</el-...

elementUI中el-select标签锁定不可选择

07-09

在 Element UI 的 el-select 组件中，可以通过设置 disabled 属性来定不可选择的选项。下面一个示例： ```html <el-select v-modelselectedValue" placeholder="Select" :disabled="is"> <el-option v-for="item in options" :="item.value" :label="item.label" :value="item.value" :disabled="item" ></el-option> </el-select> ``` 在上述中，通过给 el-select 组件的 disabled 属性绑一个变量 isDisabled，可以态控制是否锁定不可选择。同时，在 el-option 组件中，设置 disabled 属性为 true 的选项将会被锁定。注意：isDisabled 是一个变量，你可以根据业务逻辑来控制它的值，以实现动态锁定不可选择的选项。