vue2中element-ui实现登录，注册，主页面其中主页面要有展示增加内容和删除的表格

在 Vue2 中结合 Element UI 实现登录、注册和主页面功能，你可以按照以下步骤进行：

1. **安装依赖**：
首先，确保已经安装了 Vue 和 Element UI，如果没有可以使用 `npm` 或 `yarn` 安装：

   npm install vue element-ui
   # 或者
   yarn add vue element-ui

2. **创建组件**：
- 创建登录和注册组件，通常会使用 `vue-router` 来管理页面跳转，所以需要安装并配置它：

     npm install vue-router
     # 或者
     yarn add vue-router

- 分别编写 login.vue, register.vue 组件，包含表单验证和提交逻辑。

3. **设置路由**：
使用 `vue-router` 设置路由配置，比如：

   // router.js
   import Vue from 'vue'
   import Router from 'vue-router'
   import Login from '@/components/Login.vue'
   import Register from '@/components/Register.vue'
   import Main from '@/components/Main.vue'

   Vue.use(Router)

   const routes = [
     {
       path: '/login',
       name: 'Login',
       component: Login,
     },
     {
       path: '/register',
       name: 'Register',
       component: Register,
     },
     {
       path: '/',
       name: 'Main',
       component: Main,
     }
   ]

   export default new Router({
     routes
   })

4. **主页面组件 Main.vue**：
- 包含一个表格用于显示数据，可以使用 Element UI 的 `el-table` 组件：

   <template>
     <div>
       <el-button @click="loadData">加载数据</el-button>
       <el-table :data="tableData" :key="index">
         <!-- 表格列和操作列 -->
         <el-table-column prop="name" label="姓名"></el-table-column>
         <el-table-column prop="email" label="邮箱"></el-table-column>
         <el-table-column type="action" width="150">
           <template scope="scope">
             <el-button @click="deleteRow(scope.$index)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         tableData: [],
       };
     },
     methods: {
       loadData() {
         // 这里假设你有获取数据的 API，实际应用中替换为对应请求
         this.tableData = [
           { name: '张三', email: 'zhangsan@example.com' },
           // ... 更多数据
         ];
       },
       deleteRow(index) {
         this.tableData.splice(index, 1); // 删除指定索引的数据行
       },
     },
   };
   </script>

5. **添加和删除功能**：
- 主页面需要处理添加新数据的操作，可以在点击“增加”按钮时弹出一个新的模态框让用户输入信息，然后将数据添加到 `tableData` 数组中。
- 类似地，当用户点击删除按钮时，执行 `deleteRow` 方法。

6. **登录和注册后的跳转**：
登录成功后，通过 `this.$router.push('/')` 跳转到主页面；注册则可以在验证通过后返回主页面。

记得在 main.js 中引入并使用路由：

import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')