准备工作：封装获取所有联系人的接口，然后在对应组件中导入该方法。

1，用element plus中的表格组件准备骨架；用插槽的方式自定义列表页；:header-cell-style设置表头的样式。

   <!-- 表格 -->
    <el-table :data="ContactList" stripe  :header-cell-style=
"{backgroundColor:'#d9d9d9', color:'rgb(26, 26, 26)'}" style="width: 1280px" >
       <el-table-column prop="contactBean.name" label="姓名" w
idth="200" align="center"/>
       <el-table-column prop="contactBean.phone" label="手机号" 
width="200"  align="center"/>
       <el-table-column prop="contactBean.email" label="邮箱" 
width="200" align="center"/>
       <el-table-column prop="contactBean.gender" label="性别" 
width="180" align="center" />
       <el-table-column prop="no" label="职位" width="220" 
 align="center"/>
       <!-- 操作列 -->
       <el-table-column label="操作" width="216" align="center">
         <!-- scope为数据对象,scope.row拿到这一行的数据 -->
          <template #default="scope">
            <el-button size="small" style="border:0">详情</el-button>
            <el-button size="small"  
@click="removeCustomer(scope.row.no)" style="border:0;
color: #ff6666 ">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

2.获取数据，三步走：（1）在data中准备数据 （2）methods中调用接口方法 （3）在生命周期函数中调用该方法，自动填充数据。

export default {
data(){
  return {
    ContactList:[] }
},
mounted(){
    this.getContactList()
},
methods:{ 
    getContactList(){
      getContact(this.queryInfo).then(res=>{
        this.ContactList = res.data.data
    })
  }
}
}