Vue el-tag实现标签动态编辑

最新推荐文章于 2024-06-17 08:43:56 发布

Song_Estelle

最新推荐文章于 2024-06-17 08:43:56 发布

阅读量2.7k

点赞数 1

分类专栏： vue 前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43484014/article/details/126468657

版权

前端同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

vue

31 篇文章 3 订阅

订阅专栏

本文介绍如何使用Element UI实现在前端和后端环境中动态创建、编辑和删除标签，涵盖了el-input、el-tag和v-model的配合，适合开发人员快速掌握前端表单和后端实时同步的标签管理技巧。

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

el-tag实现动态编辑

页面部分：

<el-form-item prop="label">
  <div class="new-tag">
    <el-input
      ref="saveTagInput"
      v-model.trim="inputValue"
      class="input-new-tag"
      placeholder="请输入标签"
      @keyup.enter.native="handleInputConfirm"
    />
    <el-button icon="el-icon-plus" class="button-new-tag" size="small" @click="handleInputConfirm">添加</el-button>
  </div>

  <div v-for="(tag, index) in dynamicTags" :key="index" class="tags-inline">
    <el-input
      v-if="editable[index]"
      :ref="'editableInput' + index"
      v-model="tag.label"
      class="input-edit-tag"
      size="small"
      placeholder="请输入标签"
      maxlength="100"
      @keyup.enter.native="handleEditableInputConfirm(tag, index)"
      @change="handleEditableInputConfirm(tag, index)"
      @blur="handleEditableInputBlur(tag, index)"
    />
    <el-tag
      v-else
      closable
      :disable-transitions="false"
      @click="showEditTagInput(index)"
      @close="handleClose(tag, index)"
    >{{ tag.label }}</el-tag>
  </div>
</el-form-item>

script部分：

export default {
  data() {
    return {
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      editable: []
    }
  }，
  methods: {
    // 确认添加标签
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push({ label: inputValue })
      }
      this.inputVisible = false
      this.inputValue = ''
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 编辑 标签 input显示
    showEditTagInput(index) {
      this.$set(this.editable, index, true)
      this.$nextTick((_) => {
        const editableInput = 'editableInput' + index
        this.$refs[editableInput][0].$refs.input.focus()
      })
    },
    // 编辑 标签 input发生改变
    handleEditableInputConfirm(item, index) {
      if (item.label) {
        this.$set(this.editable, index, false)
      } else {
        this.$message({ message: '请输入标签', type: 'info' })
      }
    },
    // 编辑 标签 input失去焦点
    handleEditableInputBlur(item, index) {
      this.$set(this.editable, index, false)
    },
    // 删除 标签
    handleClose(tag, index) {
      this.dynamicTags.splice(index, 1)
    }
  }
}