Vue后台管理系统项目(5)品牌管理静态组件

目录

gitee仓库地址:

完整代码:

---

gitee仓库地址:

https://gitee.com/CMD-UROOT/my_project/commits/master

大家根据上传历史进行查找你需要的代码

现在的效果:

 完成后的效果:

记得下载这两个插件:

能大大提升你写ElementUI的效率

Element UI Snippets
vue-helper

比如鼠标移动到el-table-column身上,便会提示它身上有哪些属性

完整代码:

在views/product/tradeMack/index.vue中:

<template>
  <div>
    <!-- 按钮 -->
    <el-button type="primary" icon="el-icon-plus" style="margin:10px 0px">添加</el-button>
    <!-- 
      表格组件 
      data:表格组件将来需要展示的数据----数组类型
      border: 是给表格添加边框
      column属性
      label:显示标题
      width:对应列的宽度
      align:标题对齐的方式
    -->
    <el-table style="width:100%" border>
      <el-table-column prop="prop" label="序号" width="80px" align="center"></el-table-column>
      <el-table-column prop="prop" label="品牌名称" width="width"></el-table-column>
      <el-table-column prop="prop" label="品牌LOGO" width="width"></el-table-column>
      <el-table-column prop="prop" label="操作" width="width"></el-table-column>
    </el-table>
    <!-- 
      分页器 
      当前第几页、数据总条数、每一页展示条数、连续页码数
      @current-change="" 
      @size-change=""

      current-page:代表的是当前第几页
      total:代表分页器一共需要战术数据条数
      page-size:代表的是每一页需要展示多少条数据
      page-sizes:代表可以设置每一页展示多少条数据
      pager-count:按钮的数据 如果9 连续页码是7,如果是7 连续页码是5
      layout:可以实现分页器布局   
      ->位于最右边,跳转里面的sizes,tatal位置可以实现页面的改变
    -->
    <el-pagination 
      style="margin-top:20px;textAlign:center"
      :current-page="6" 
      :total="99"  
      :page-size="3" 
      :page-sizes="[3,5,10]"
      :pager-count="9"
      layout="prev,pager,next,jumper,->,sizes,total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name:'tradeMark',
  }
</script>

<style scoped>

</style>

效果: