写一个 vue 2 +element 客户关系页面不联网点击添加存到vueX中 ，有查找 默认全部显示 如何实现 el-table 列表内有 客户名称，客户联系方式、客户级别、客户地址、客户重要性 列表后有删除按钮 点击删除 删除当条

在 Vue 2 中结合 Element UI 实现一个简单的客户关系管理页面，你需要做以下几个步骤：

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

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

2. **创建Vuex store**:
创建一个名为 `store/modules/crm.js` 的文件，用于存储客户数据：

   export const state = () => ({
     customers: []
   });

   export const mutations = {
     setCustomers(state, customers) {
       state.customers = customers;
     },
     deleteCustomer(state, index) {
       state.customers.splice(index, 1);
     }
   };

   export const actions = {
     async fetchData({ commit }) {
       // 这里假设有一个异步函数fetchData从服务器获取数据，在实际项目中可以用axios等工具
       try {
         const response = await fetchData();
         commit('setCustomers', response.data);
       } catch (error) {
         console.error('Error fetching data:', error);
       }
     },
     addCustomer({ commit }, customer) {
       commit('setCustomers', [...state.customers, customer]);
     },
     deleteCustomerFromTable({ commit }, index) {
       commit('deleteCustomer', index);
     }
   };

3. **Vue组件中引用Vuex**:
在需要使用数据和操作的地方引入 `store`：

   <template>
     <div>
       <!-- 添加新客户的表单 -->
       <el-form :model="newCustomer" @submit.prevent="addCustomer">
         <!-- 表单元素... -->
       </el-form>

       <!-- 显示客户列表 -->
       <el-table :data="customers">
         <!-- 表头和行内容... -->
         <el-table-column label="操作">
           <template slot-scope="scope">
             <el-button @click="deleteCustomerFromTable(scope.$index)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
   </template>

   <script>
   import { mapState, mapActions } from 'vuex';
   export default {
     computed: {
       ...mapState(['customers']) // 获取Vuex中的数据
     },
     methods: {
       ...mapActions(['fetchData', 'addCustomer', 'deleteCustomerFromTable']), // 引入Vuex的动作
       addCustomer() {
         // 新增客户处理...
       },
       deleteCustomerFromTable(index) {
         this.$store.dispatch('deleteCustomer', index); // 调用Vuex删除方法
       }
     },
     mounted() {
       this.fetchData(); // 初始化数据
     }
   };
   </script>

4. **表格数据绑定和列设置**:
- 根据业务需求，设置表头和行内容，例如：

   <el-table-column prop="name" label="客户名称" />
   <el-table-column prop="contact" label="客户联系方式" />
   <el-table-column prop="level" label="客户级别" />
   <el-table-column prop="address" label="客户地址" />
   <el-table-column prop="importance" label="客户重要性" />

5. **不联网情况下的添加**:
当用户离线时，你可以模拟数据或者本地存储（如localStorage），但真正保存到服务器还是需要网络连接。