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>