vue怎么在el-input中放el-tag

在Vue.js中，要在`<el-input>`组件中添加`<el-tag>`标签，可以采用组件嵌套的方式实现自定义输入框的功能。首先，你需要安装Element UI库，如果还没有安装，可以在项目根目录下运行`npm install element-ui` 或者 `yarn add element-ui`。

以下是一个简单的例子：

<template>
  <div>
    <el-input v-model="inputValue" placeholder="请输入内容">
      <!-- 使用v-html绑定el-tag的内容 -->
      <slot name="tag">
        <el-tag :closable="true" @close="handleClose">
          {{ tagText }}
        </el-tag>
      </slot>
    </el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      tagText: '', // 存储新添加的标签文本
      tags: [], // 存储所有的标签数组
    };
  },
  methods: {
    handleClose(tag) {
      this.tags = this.tags.filter(t => t !== tag);
    },
    handleAddTag(event) {
      if (event.key === 'Enter') { // 检查是否按了回车键
        const newTag = event.target.value.trim();
        if (newTag) {
          this.tags.push(newTag);
          this.tagText = '';
        }
      }
    },
  },
};
</script>

在这个例子中，当你在`<el-input>`内输入并按下回车键时，会将输入的值作为新的标签添加，并且关闭当前的输入框。`<slot name="tag">`用于接收自定义的内容，这里我们放置了一个`<el-tag>`元素。`handleClose`方法会在用户点击删除按钮时移除相应的标签。