vue 實現多選框

沒有用ui框架，直接上input

<template>
  <div id="phoneBg">
    <div class="heaTop">
      <div class="leftDiv">
        <span class="tong">通訊錄</span>
        <div class="inputd">
          <div class="demo-input-suffix">
            <el-input placeholder="請輸入賬號搜索" @blur="queryTXun" suffix-icon="el-icon-search" v-model="input2"></el-input>
          </div>
        </div>
        <!--添加分組-->
        <add-group></add-group>
        <div class="echeckbox" style="float: right">
          <el-dropdown :hide-on-click="false" class="pat">
          <span class="el-dropdown-link">
            員工<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="gro,index in groupSpan" @click="querySele(index)">{{gro}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <!--表格組件-->
    <phonetable ></phonetable>
    <!--添加聯系人-->
    <add-contacter></add-contacter>
    <!--轉移分組-->
    <transfer-group></transfer-group>
    <!--分頁-->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        layout="prev, pager, next"
        :total="50">
      </el-pagination>
    </div>
    </div>
</template>

　　關於單選，多選函數請看注釋

<script>
  export default {
    data () {
      return {
        input2:'',
        disd: 'disblock',
        dis:'disnone',
        dialogFormVisible1: false,
        dialogFormVisible2: false,
        dialogFormVisible3: false,
        form:{group:''},
        count: 4,
        groupSpan:['員工','客戶','我的朋友'],
        tableData3: [],
      }
    },
    methods:{
      viewQH(){
        this.dis='disblock'
        this.disd='disnone'
      },
      // 名稱查詢的方法(一條數據)
      queryTXun() {
        // 需要用父傳子的方法「props」，將值傳給phoneTable中的tableData3
        console.log(this.tableData3)
      },
      //  下拉選擇查詢(多條數據)
      querySele(value){

      },
      // 添加分組表單
      groupSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.form)
            alert('submit')
          } else {
            return false;
          }
        });
      },
      handleSizeChange(){

      },
      handleCurrentChange(){

      },
      currentPage4(){},
      tableDataModel(value){
        // 子組件傳遞的值
        console.log(value);
        // this.tableData3=value
      }
    },
    components:{phonetable, addContacter, transferGroup, addGroup}
  }
</script>