vue.js+element实现简单的后台管理系统（二）

上一篇就登录页面做了个简单的介绍，这一篇想先说一下组件的情况，用户部分写在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 把详情需要的数据 传了过去。