tab栏切换‘单人/多人’查询，多人查询增加‘添加’按钮，集成框

最终效果图：

<div class="trackQuery">
    <div class="divHeader">学生信息检索</div>
    <div class="divComponent">
      <div class="searchTitle">
//用isMulti的true和false决定style，用v-if="isMulti"选择性显示块
        <span class="singleSearch" :class="{ active: !isMulti }" @click="changeSearch(1)">单人查询</span>
        <span class="multiSearch" :class="{ active: isMulti }" @click="changeSearch(2)">多人查询</span>
      </div>
      <div class="queryInformation">
        <div class="searchBar">
          <span class="searchBarTitle">学号</span>
          <input
            v-model="searchKey.number"
            placeholder="请输入学号"
            class="searchBarBox"
            @keyup.enter.native="keySearch"
            @change="keySearch"
            :style="{width: isMulti ? '45%' : '65%'}">
          </input>
          <i class="add" v-if="isMulti" @click="addInformation">+添加</i>
        </div>
        <div class="searchBar">
          <span class="searchBarTitle">姓名</span>
          <div class="searchBarBox">
            <span>{{ curPerson.name }}</span>
          </div>
        </div>
        <div class="searchBar">
          <span class="searchBarTitle">家庭住址</span>
          <div class="searchBarBox">
            <span>{{ curPerson.address }}</span>
          </div>
        </div>
        <div class="searchBar">
          <span class="searchBarTitle">电话</span>
          <div class="searchBarBox">
            <span>{{ curPerson.tel }}</span>
          </div>
        </div>

      </div>
      <div class="totally" v-if="isMulti">
        <span class="totallyTitle">已添加人员</span>
        <span class="totallyBar">{{addPersonInformation}}</span>
      </div>
    </div>
  </div>

export default {
  computed:{
    addPersonInformation(){
      let add = ''
        this.addPerson.forEach(item=>{
          let person = item.name
            add += person;
        })
      return add
    }
  },
  data() {
    return {
      personInformation: [
        {number: '01', name: '张三', address: '上海市', tel: '1325555'},
        {number: '02', name: '李四', address: '北京市', tel: '1325555'},
        {number: '03', name: '王五', address: '上海市', tel: '1325555'},
        {number: '04', name: '张三', address: '广州市', tel: '1325555'},
        {number: '05', name: '李四', address: '西安市', tel: '1325555'},
      ],
      isMulti: false,
      searchKey: {
        number: null
      },
      addPerson: [],
      curPerson: [
        {
          number: null,
          name: null,
          address: null,
          tel: null,
        }
      ]
    }
  },
  methods: {
    changeSearch(type) {
      if (this.type === 1) {
        this.isMulti = false
      } else {
        this.isMulti = true
      }
    },
    keySearch() {
      this.curPerson = this.personInformation.find(item => {
        return item.number === this.searchKey.number
      })
    },
    addInformation() {
     this.addPerson.push(this.curPerson)
    }
  }
}

* {
  padding: 0;
  margin: 0;
}

.trackQuery {
  border-radius: 16px;
  height: 100%;
  width: 100%;
    margin-top: 5%;
  background-color: rgba(6, 32, 43, 0.2);
}

.divHeader {
  font-size: 16px;
  padding: 10px 15px;
  font-weight: bold;
}

.divComponent {
  width: 100%;
  height: calc(100% - 45px);
}

.active {
  color: blue;
  border-bottom: 2px solid blue;
}

.searchTitle {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 4%;
}

.queryInformation {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-top: 5%;
  height: 50%;
  width: 100%;
}

.searchBar {
  display: flex;
  justify-content: space-evenly;
  width: 95%;
  height: 20%;
}

.searchBarTitle {
  width: 30%;
  display: flex;
  justify-content: flex-end;
}

.searchBarBox {
  height: 85%;
  width: 65%;
  background: rgba(14, 43, 52, 0.1);
  border: 1px solid #314e58;
  box-shadow: inset 0 0 2px #3370c5;
  font-size: 14px;
  border-radius: 5px;
}

.add {
  width: 18%;
}

.totally {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 99%;
  height: 30%;
}

.totallyBar {
  width: 90%;
  height: 100%;
  background: rgba(14, 43, 52, 0.1);
  border: 1px solid #314e58;
  box-shadow: inset 0 0 2px #3370c5;
  font-size: 14px;
  border-radius: 5px;
}