目录
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>
效果: