vue elementui 实现 通讯录效果

要实现通讯录效果，可以使用 Element UI 中的表格组件（el-table）和树形控件组件（el-tree），具体步骤如下：

1. 安装 Element UI 并引入相关组件和样式：

npm install element-ui --save

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

2. 定义数据源，数据源中包含通讯录的名称、电话等信息，同时可以使用树形结构来组织数据：

data() {
  return {
    tableData: [
      { name: '张三', phone: '13888888888', email: 'zhangsan@qq.com', address: '北京市' },
      { name: '李四', phone: '13999999999', email: 'lisi@qq.com', address: '上海市' },
      { name: '王五', phone: '13666666666', email: 'wangwu@qq.com', address: '广州市' },
    ],
    treeData: [
      {
        label: '北京市',
        children: [
          { label: '张三', phone: '13888888888', email: 'zhangsan@qq.com' },
        ],
      },
      {
        label: '上海市',
        children: [
          { label: '李四', phone: '13999999999', email: 'lisi@qq.com' },
        ],
      },
      {
        label: '广州市',
        children: [
          { label: '王五', phone: '13666666666', email: 'wangwu@qq.com' },
        ],
      },
    ],
  }
}

3. 在模板中使用表格组件和树形控件组件，将数据源中的数据渲染到表格和树形控件中：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-tree :data="treeData"></el-tree>
  </div>
</template>

通过以上步骤，就可以实现一个简单的通讯录效果，用户可以通过表格查看通讯录列表，也可以通过树形控件查看通讯录的组织结构，同时还可以添加、删除、编辑通讯录的数据。