【Vue-Element UI】Element UI做表格和分页器，前后端展示列表数据
发布时间
阅读量：
阅读量
目录
静态组件界面
1、表格（Table）
2、分页器 （Pagination）
3、展示列表数据
4、接口统一暴露
静态组件界面
表格和分页器外观图：
首先利用ElementUI搭建静态组件界面
Element - The world's most popular Vue UI framework
1、表格（Table）
<el-table style="width: 100%" border :data="list">
<el-table-column type="index" label="序号" width="80px" align="center"> </el-table-column>
<el-table-column prop="tmName" label="品牌名称" width="" align="center"> </el-table-column>
<el-table-column prop="logoUrl" label="品牌logo" width="" align="center">
<template slot-scope="{row,$index}">
<img :src="row.logoUrl" alt="" style="width:100px;heigth:100px">
</template>
</el-table-column>
<el-table-column prop="" label="操作" width="" align="center">
<template slot-scope="{row,$index}">
<el-button type="warning" icon="el-icon-edit">修改</el-button>
<el-button type="danger" icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
</el-table>主要属性
对于字段来说，在Markdown语法中设定为type="index"时，默认情况下字段会被标记为包含可扩展内容，并且该列表会根据需要进行排序处理。
data: 表格组件将来需要展示数据---数组类型,
border ：给表格设置边框
column属性：
label ：显示的标题
width ：对应列的宽度
align ：标题的对齐方式
prop :对应的列的内容
注意：Element UI的table组件展示的数据是一列一列进行展示数据
作用域插槽：
后台的数据：
2、分页器 （Pagination）
<el-pagination
style="margin-top:20px;textAlign:center"
:current-page="page"
:total="total"
:page-size="limit"
:page-sizes="[3,5,10]"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="prev,pager,next,jumper,->,sizes,total"
>
</el-pagination>主要属性
:current-page :当前第几页
:total ：总条数
:page-size ：每页展示多少数据
:page-count: 连续页码数
:page-sizes :代表可以设置每一页展示多少数据
layout ：可以实现分页器布局
事件
@current-change ="handleCurrentChange":当当前页码数改变使调用
size change event 被绑定为函数 handleSizeChange 每当分页器在每一页显示数据数量发生变动时就会执行
3、展示列表数据
<script >
export default {
name: "tradeMark",
//组件挂载完毕发请求
mounted(){
//获取列表数据方法
this.getPageList()
},
data() {
return {
//分页器当前页码
page:1,
//当前页数展示条数
limit:3,
//总共数据条数
total:0,
//列表展示的数据
list:[]
};
},
components: {},
methods: {
//获取品牌列表的数据
async getPageList(){
//解构出参数
const {page,limit} = this
//获取品牌列表的接口
let result =await this.$API.trademark.reqTradeMarkList(page,limit)
// console.log(result)
if(result.code==200){
//分别展示数据总条数与列表展示的数据
this.total=result.data.total
this.list = result.data.records
}
},
handleCurrentChange(pager){
//console.log(pager)
//修改参数
this.page=pager
this.getPageList()
},
//当分页器每一页展示数据条数发生变化时
handleSizeChange(limit){
//console.log(limit)
this.limit= limit
this.getPageList()
}
},
};
</script>4、接口统一暴露
获取列表数据接口（src/production/tradeMark.js）：
/这个模块主要获取品牌管理的数据模块
import request from '@/utils/request'
//获取品牌列表接口
//GET /admin/product/baseTrademark/{page}/{limit}
export const reqTradeMarkList = (page,limit)=>request({url:`/admin/product/baseTrademark/${page}/${limit}`,method:"get"})统一暴露接口（src/api/index.js）
//将4个模块请求的接口函数统一暴露
import *as trademark from './production/tradeMark'
import *as attr from './production/attr'
import *as spu from './production/spu'
import *as sku from './production/sku'
export default{
trademark,
attr,
spu,
sku
}**import *as xxx from 'xxx' : **会将若干export导出的内容组合成一个对象返回
在入口文件main.js中 引入相关的API请求接口：
//引入相关API请求接口
import API from '@/api'
//组件实例的原型的实例指向的是vue.prototype
//任意组件可以使用API相关的接口
Vue.prototype.$API = API全部评论 (0)
还没有任何评论哟~