element-ui输入框如何实现回显的多选样式？

  废话不多说直接上效果🧐

<template>
  <div>
    <el-form
        :model="params"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="68px"
      >
      <el-form-item label="标签" prop="tag">
        <el-input
          v-model="inputContent"
          clearable
          readonly
        >
          <template slot="prefix">
            <el-tag slot="prepend" type="info" size="small" v-if="checkboxGroup.length>=1" closable  @close="handleClose(checkboxGroup[0])">{{ checkboxGroup[0] }}el-tag>
            <el-tag slot="prepend" type="info" size="small" v-if="checkboxGroup.length>1">+{{ checkboxGroup.length-1 }}el-tag>
          template>
          <template slot="suffix">
            <i class="el-input__icon el-icon-menu" @click="openTags">i>
          template>
        el-input>
      el-form-item>
    el-form>
 
    <el-dialog title="选择标签" :visible.sync="tagsDialog" width="824px" append-to-body>
      <div class="select">
        <div class="title">已选择标签：div>
        <el-tag
          :key="tag"
          v-for="tag in checkboxGroup"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
          effect="plain">
          {{tag}}
        el-tag>
      div>
      <el-divider>el-divider>
      <el-checkbox-group v-model="checkboxGroup">
        <el-checkbox v-for="item in dynamicTags" :key="item" :label="item" border>el-checkbox>
      el-checkbox-group>
 
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitTags">确 定el-button>
        <el-button @click="tagsDialog = false">取 消el-button>
      div>
    el-dialog>
  div>
template>
 
<script>
export default {
  name: 'InputCheckbox',
  data() {
    return {
      params: {
        tag: [],
      },
      inputContent: '',
      tagsDialog:false,
      checkboxGroup:[],
      dynamicTags: ['标签一', '标签二', '标签三','标签四'],
    };
  },
  computed: {  
    // 计算并设置输入框的显示值
    formattedDisplayValue() {
      if(!this.checkboxGroup.length) return;
      return this.checkboxGroup.length >= 1 ? `${this.checkboxGroup.slice(0, 1).join(', ')} +${this.checkboxGroup.length - 1}`:this.checkboxGroup[0];
    },
  },
  watch:{
    checkboxGroup(){
      this.params.tag = this.formattedDisplayValue;
    }
  },
  methods: {
    openTags(){
      this.tagsDialog = true;
    },
    submitTags(){
      this.tagsDialog = false;
    },
    handleClose(tag) {
      this.checkboxGroup.splice(this.checkboxGroup.indexOf(tag), 1);
    },
  },
};
script>
 
<style lang="scss" scoped>
::v-deep .el-checkbox{
  margin-right: 0;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.el-input__icon{
  cursor: pointer;
}
.select{
  .title{
    margin-bottom: 10px;
  }
}
style>