目录
前言:
很多业务中有类似表格的操作,尤其是类似后台操作的业务产品等更需要将表格封装起来,以此减轻代码工作量提升开发效率,而且还能统一修改表格样式等等。
这里以ElementUI组件库为前提封装
如图所示:
这里二次封装的el-table组件名为AppTable
父组件如何使用AppTable:
tableData -- 表格数据,通过接口拿到值。类型为Array
tableColumns -- 表格的列,需要在data中组装定义完成。类型为Array
onClickButton -- 操作按钮执行的方法,子组件的回调,在methods中定义
pagination -- 分页需要的参数
handlerPaging -- 监听分页的方法,在methods中定义
//父组件
<template>
<div class="page-main-style">
<div class="content-wrap">
<AppTable
:tableData="tableData"
:tableColumns="tableColumns"
@onClickButton="onClickButton"
:pagination.sync="pagination"
@handlerPaging="handlerPaging"></AppTable>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
tableColumns: [
{
label: '订单编号',
prop:'stockId',
},
{
label: '运单号',
prop:'trackNo',
},
{
label: '物流公司',
prop:'logisticsCompany',
},
{
label: '状态',
prop:'status',
formatter: this.formatterStatus
},
{
label: '操作',
width: '200',
fixed: 'right',
options: [
{
label: '填写',
pcode: 'kernel_logistics_save', // 按钮的权限
methods: {fun:'handleClickDetail', name: 'add'},
render(row){ //