Element-UI中有关标签的功能完善

最新推荐文章于 2024-07-01 08:59:47 发布

f[h(x)]

最新推荐文章于 2024-07-01 08:59:47 发布

阅读量892

点赞数 1

分类专栏： vue个人理解文章标签： vue javascript elementui

本文链接：https://blog.csdn.net/weixin_44953633/article/details/116210839

版权

本文介绍如何在Element-UI的表格中增强标签功能，包括点击标签进行修改和新建标签。通过动态ref实现DOM元素引用，并解决聚焦问题，提供关键代码分享。

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

针对Element-UI中标签的功能添加

官方文档给出的功能较少,我在使用过程中，完善了它在表格中的运用，以及增加了点击标签可以实现修改的功能
实现效果类似下图：

点击第一行的信计181标签时，你可以在输入框输入你想修改的词，使用键盘enter表示确认修改

在这里插入图片描述

点击第二行新建标签时，同样在输入框输入添加的标签即可

下面是有关功能的代码

<template slot-scope="scope">
          <el-tag
            size="medium"
            v-for="(tag,index) in scope.row.class"
            :key="tag"
            closable
            @close="handleClose(tag, scope.$index)"
            @click="changeTag(tag, scope.$index , index)"
            >{
   {
    tag }}</el-tag
          >
          //输入框
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue[scope.$index]"
            :ref="'saveTagInput' + scope.$index"
            size="small"
            @keyup.enter.native="handleInputConfirm"
          >
          </el-input>
          //新增标签按钮
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput(scope.$index)"
            >+ New Tag</el-button
          >
        </template>

        <script>
        //删除标签
   handleClose(tag, index) {
   
      console.log(tag, index);
      this.tableData[index].class.splice(
        this.tableData[index].class.indexOf(tag),
        1
      );
    },
        //让输入框展示，由于我这里使用了表格，聚焦问题需要注意。
    showInput(index) {
   
      this.index = index;
      this.inputVisible = true;
      this.$nextTick((_) => {
   
        let saveTagInput = "saveTagInput" + index;
        console.log(this.$refs[saveTagInput]);
        this.$refs[saveTagInput].$refs.input.focus();
      });
    },


//点击标签时让input框弹出
    changeTag(item, index,index1) {
   
      console.log(item, index,index1);
      this.inputVisible = true;
      this.$nextTick((_) => {
   
        let saveTagInput = "saveTagInput" + index;
        console.log(this.$refs[saveTagInput]);
        this.$refs[saveTagInput].$refs.input.focus();
      });
      this.inputValue[index] = item;
      this.index = index;
      this.tagIndex = index1;
      this.tagValue = item;
    },

//修改标签内容
    handleInputConfirm() {
   
      let inputValue = this.inputValue[this.index];
      if (this.tagValue && this.tagValue != inputValue) {
   
        this.tableData[this.index].class.splice(this.tagIndex, 1, inputValue);
        this.inputVisible = false;
        this.tagValue = "";
        this.tagIndex = "";
        this.inputValue[this.index] = "";
      } else if (this.tagValue && this.tagValue == inputValue) {
   
        alert("没有改动");