上一篇就登录页面做了个简单的介绍，这一篇想先说一下组件的情况，用户部分写在login.vue里面，单独提出来一个head.vue用来做顶部导航部分，index部分，index部分有一个tab选项卡，index主要是一张小表格，每行按钮按钮跳转至index-detail部分。
tabs1=index
tabs2=列表
tabs3 = 列表2
现在说一下index部分，
<el-menu :default-active="active" class="el-menu-demo" mode="horizontal"> <router-link to="tab1(index)部分"> <el-menu-item index="1">tab1(index)部分</el-menu-item> </router-link> <router-link to="tab2部分"> <el-menu-item index="2">tab2部分/el-menu-item> </router-link> <router-link to="tab3部分"> <el-menu-item index="4">tab3部分</el-menu-item> </router-link> </el-menu> 选项卡用的element的tabs，还有卡片样式可以选 <el-table :data="tableData" style="width: 100%"> <el-table-column prop="xx1" label="XXXXX" width="170"> <template slot-scope="scope"> <span v-show="scope.row.xxType == '0'" style="color:#50A88D">状态1</span><span v-show="scope.row.xxType == '1'" style="color:#F05B5F">状态2</span> </template> </el-table-column> <el-table-column prop="xx2" label="XXXXX" width="170"> <template slot-scope="scope"> <span>{{scope.row.xxType==1? 'aaa':'bbb'}}</span> </template> </el-table-column> <el-table-column prop="xx3" label="XXXXX" width="170"> </el-table-column> <el-table-column prop="" label="XXXXX" width="198"> <template slot-scope="scope"> <span>{{scope.row.Min}}~{{scope.row.Max}}</span> </template> </el-table-column> <el-table-column prop="xx4" label="XXXXX" width="180"> </el-table-column> <el-table-column prop="xx5" label="XXXXXXX" width="170"> </el-table-column> <el-table-column label="XXXXX" width="140"> <template slot-scope="scope"> <router-link :to="{path:'/xx1', query: { name: scope.row.xxx,name2:scope.row.xxx }}"> <el-button type="text" size="small">详情</el-button> </router-link> </template> </el-table-column> </el-table> 其中 <template slot-scope="scope"> <span v-show="scope.row.xx == '0'" style="color:#50A88D">状态1</span><span v-show="scope.row.xxx == '1'" style="color:#F05B5F">状态2</span> </template> 第一次使用element这种插值的写法，觉得非常好用，直接在 mounted() { this.xxx(); }, 里调取方法，获取到数据过后，放入表格里面，一整行的数据就能直接渲染出来。 同时v-show将 状态1和2分别需要的样式绑定在后台返回的0和1的状态判断上，非常的方便。 <span>{{scope.row.Min}}~{{scope.row.Max}}</span>里，做了一个简单的拼接，实现了区间范围的小功能 最后通过 <router-link :to="{path:'/xx1', query: { name: scope.row.xxx,name2:scope.row.xxx }}"> <el-button type="text" size="small">详情</el-button> </router-link> 用router-link 把详情需要的数据 传了过去。
转载于:https://www.cnblogs.com/baiin925/p/9945198.html
相关资源：vue element ui搭建后台业务系统