在一个页面中有个侧边栏，侧边栏的内容为32省，点击其中的一个省会出现这个省的table表格，要求不要且换页面 优化样式，使用vue2 和 element-ui，出一个效果图

要在Vue2中使用Element UI创建一个带省份列表的侧边栏，你可以使用`el-tree`组件来展示省级数据，并结合`el-table`渲染对应的表格。以下是简化的步骤和代码示例：

1. 安装依赖：

   npm install element-ui vue-router --save

2. 引入所需组件：

   import { Tree, Table } from "element-ui";

3. 设计组件模板：

   <template>
     <div>
       <el-menu :default-active.sync="activeIndex" @select="handleSelect">
         <el-submenu v-for="(province, index) in provinces" :key="index" :index="province.id">
           <template slot="title">{{ province.name }}</template>
           <el-menu-item v-for="city in province.cities" :key="city.id" :index="city.id">
             {{ city.name }}
           </el-menu-item>
         </el-submenu>
       </el-menu>

       <el-collapse v-model="showTable">
         <el-collapse-item :header="selectedProvince.name">
           <el-table :data="selectedProvince.data" style="width: 100%">
             <!-- 表格列配置，例如 -->
             <el-table-column prop="name" label="名称"></el-table-column>
             <el-table-column prop="value" label="值"></el-table-column>
           </el-table>
         </el-collapse-item>
       </el-collapse>
     </div>
   </template>

4. 数据和方法部分：

   export default {
     data() {
       return {
         provinces: [
           ... // 省份数据，如 { id: 1, name: '省份A', cities: [{ id: 11, name: '城市A' }, { id: 12, name: '城市B' }] }
         ],
         activeIndex: '',
         showTable: false,
         selectedProvince: null,
       };
     },
     computed: {
       // 根据activeIndex获取相应的province数据
       provincesById(id) {
         return this.provinces.find(province => province.id === id);
       }
     },
     methods: {
       handleSelect(index) {
         this.activeIndex = index;
         const province = this.provincesById(index);
         this.selectedProvince = province;
         this.showTable = true;
       },
     },
   };

5. 样式优化：
使用Element UI提供的CSS变量(`--el-icon`)，调整字体图标大小和颜色等，以及自定义表头、行高、间距等。例如：

   .el-collapse-item__header {
     font-size: 16px;
     cursor: pointer;
   }
   .el-collapse-item.is-active .el-collapse-item__header::before {
     color: var(--primary-color);
   }
   el-table tr {
     height: 40px;
   }

这只是一个基本的实现，你可能需要根据实际的数据结构和需求做适当的调整。完成上述步骤后，你应该能看到一个点击省份侧滑展示对应表格的侧边栏。