B2B2C商城系统-Table组件封装代码分享

摘要：流行的电商系统的商家中心、管理中心，理表格使用频率高，减少关于table的业务代码，且便于后期统一修改，后期维护。本文以Javashop电商系统为例介绍基于element中table组件进行二次简单的封装

一 table组件需求

1. 搜索栏可选

2. 包含分页

二 封装代码

首先在ui-components新建一个table文件夹

 

在同级的index.js里导入导出

import Vue from 'vue'  
import Tabel from './src/main'  
  
Tabel.install = () => {  
  Vue.component(Tabel.name, Tabel)  
}  
  
export default Tabel

 

props 允许父组件传递数据给子组件；并且对于父组件传递过来的参数应该加一些检验规则，比如数据类型type，默认值default（对象和数组的默认值必须通过函数返回）

props: {
  /** 是否显示斑纹 */
  stripe: {
    type: Boolean,
    default: true
  },
  /** 行数据的 Key */
  rowKey: {
    type: [String,Function],
    default: null
  },
  /** 是否显示工具栏 */
  toolbar: {
    type: Boolean,
    default: true
  },
  /** 是否显示操作提示 */
  tips: {
    type: Boolean,
    default: false
  },
  /** 是否显示分页 */
  pagination: {
    type: Boolean,
    default: true
  },
  /** 表格数据 */
  tableData: {
    default: () => ([])
  },
  /** 加载状态 */
  loading: {
    type: Boolean,
    default: false
  },
  /** 当选择项发生变化 */
  selectionChange: {
    type: Function,
    default: () => {}
  }
}

 搜索栏是否可选实现：默认是显示，参数值为true；传递参数toolbar，可设置是否显示搜索栏，

 

分页功能：默认显示分页功能，参数值为rue；传递参数pagination，可设置是否显示分页

 

调用table组件

只需要在调用组件的地方，写上组件名字的标签即可，同时在标签上可以设置一些参数，传递给table组件

<en-table-layout
  toolbar
  pagination
  :tableData="tableData"
  :loading="loading">
  </en-table-layout>

 这样一个简单table组件封装就完成了

易族智汇（javashop）原创文章