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

一 table组件需求

  1. 搜索栏可选

  2. 包含分页

二 封装代码

首先在ui-components新建一个table文件夹 B2B2C商城系统-Table组件封装代码分享-LMLPHP

在同级的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)原创文章

04-06 09:41