el-input-tag标签

el-input-tag是Element UI框架中的一个组件，用于输入多个标签。它的用法如下：

<el-input-tag v-model="tags"></el-input-tag>

其中，`v-model`绑定了一个名为`tags`的数组，用于存储输入的标签。如果要限制标签的数量，可以使用`maxlength`属性，例如：

<el-input-tag v-model="tags" :maxlength="5"></el-input-tag>

这样就限制了最多只能输入5个标签。除此之外，还可以通过`placeholder`属性设置输入框的提示语，通过`split`属性设置标签之间的分隔符，以及通过`type`属性设置输入框的类型（例如`textarea`）等。

相关问题

el-input-tag标签怎么校验输入的内容只能是数字

你可以使用 el-form 中的 rules 属性来实现 el-input-tag 标签的输入内容校验，具体实现如下：

1. 在 el-form 中的 rules 属性中添加自定义校验规则：

<template>
  <el-form :model="form" :rules="rules">
    <el-form-item label="数字标签">
      <el-input-tag v-model="form.tag" :type="tagType"></el-input-tag>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        tag: []
      },
      rules: {
        tag: [
          { validator: this.checkTagIsNumber, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    checkTagIsNumber(rule, value, callback) {
      const regex = /^[0-9]*$/
      if (!value.every(tag => regex.test(tag))) {
        callback(new Error('标签内容只能为数字'))
      } else {
        callback()
      }
    }
  }
}
</script>

2. 在 checkTagIsNumber 方法中编写校验规则，使用正则表达式 /^[0-9]*$/ 来判断输入的标签内容是否都为数字，若不是则返回错误信息。

这样就可以实现 el-input-tag 标签的输入内容校验，确保输入的标签内容为数字。

el-input结合el-tag

el-input是一个输入框组件，而el-tag是一个标签组件。这两个组件可以结合使用，例如在输入框中输入标签，然后将其显示为el-tag。以下是一个简单的示例：

<template>
  <div>
    <el-input v-model="inputValue" @keyup.enter="addTag"></el-input>
    <div>
      <el-tag v-for="(tag, index) in tags" :key="index" closable @close="removeTag(index)">
        {{tag}}
      </el-tag>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      tags: []
    }
  },
  methods: {
    addTag() {
      if (this.inputValue && !this.tags.includes(this.inputValue)) {
        this.tags.push(this.inputValue);
        this.inputValue = '';
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1);
    }
  }
}
</script>

在上面的示例中，我们使用了一个输入框和一个标签列表，用户可以在输入框中输入标签，按下Enter键后将其添加到标签列表中。每个标签都是一个el-tag组件，可以点击右侧的关闭按钮来删除它。