没有用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>