vue中，添加标签el-tag，不能添加重复的类型标签之indexOf检索的字符串值没出现则返回 -1

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

viceen

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

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/weixin_44867717/article/details/125133013

版权

vue-创新专栏收录该内容

65 篇文章 2 订阅

订阅专栏

vue中，添加标签el-tag，不能添加重复的类型标签之indexOf检索的字符串值没出现则返回 -1

效果

在这里插入图片描述

代码

结构

<el-form :model="form" class="form" ref="ruleForm" :rules="rules" label-width="180px">
    <el-form-item label="标签：">
        <el-input size="small" placeholder="请输入标签" v-model="labelType" clearable style="width: 220px;"></el-input>
        <el-button type="primary" size="small" style="margin-left: 10px;" @click="addTypetag">添加</el-button>
    </el-form-item>

    <el-form-item prop="labels">
        <el-tag v-for="tag in form.labels" :key="tag.name" closable @close="deleteCurTags(tag)" style="margin-right: 5px;">
            {{tag}}
        </el-tag>
    </el-form-item>
</el-form>

逻辑

<script>
export default {
  data () {
      return{
		labelType: '',
        form: {
          labels: []
        },
      }
  },
  methods: {
    /**
     * 添加标签
     * @param {*}
     * @return {*}
     */
    addTypetag () {
      if (this.labelType) {
        if (this.form.labels.indexOf(this.labelType) > -1) {
          this.$message({
            type: 'warning',
            message: '不能添加重复的类型标签'
          });
        } else {
          this.form.labels.push(this.labelType);
        }
      }
    },
    /**
     * 删除标签
     * @param {*}
     * @return {*}
     */
    deleteCurTags (tag) {
      this.form.labels.splice(this.form.labels.indexOf(tag), 1);
    },
  }
}
</script>