Vue+Ant Design of Vue二次封装Table+Pagination 组件

前言  

在Vue的Ant-Design-Of-Vue-Table组件中，你可以对ant-design-of-vue-Table-pagination组件进行二次封装，这样可以减少页面代码重复，使页面代码更简洁、更容易操作。      

1.新建一个table.js文件(Table+Pagination+查询按钮+重置按钮二次封装)   

import { Table } from 'ant-design-vue'
import Vue from 'vue'
const componentName = 'my-table-option'
export default {
  name: 'myTable',
  props: Object.assign({}, Table.props, {
    // 返回 Promise<{ currPage, totalCount, list: any[] }> 的获取数据的函数，用于内部管理数据加载
    data: { type: Function },
    // 查询条件
    dataParameters: null,
    // 是否开启：单击行则选中行
    selectOnClick: { type: Boolean, default: true },
    // 默认翻到第 1 页
    pageNum: { type: Number, default: 1 },
    // 默认分页大小 10 行
    pageSize: { type: Number, default: 10 },
    // 是否显示分页大小切换下拉框
    showSizeChanger: { type: Boolean, default: true },
    // 是否显示分页器
    showPagination: { type: [String, Boolean], default: 'auto' },
    pageURI: { type: Boolean, default: false },
    bordered: { type: Boolean, default: true }
  }),
  data () {
    return {
      localLoading: false,
      localDataSource: [],
      localPagination: Object.assign({}, this.pagination),
      localScroll: {},

      // 表格列显示隐藏
      filterValue: [],
      filterShow: false,
      fullDataSource: null, //合计
    }
  },
  computed: {
    // 判断是否在弹出框里，用于定义表格是否可以滚动
    isInDialog () {
      let parent = this.$parent
      while (parent) {
        if (parent.$options._componentTag === 'a-modal') {
          return true
        }
        parent = parent.$parent
      }
      return false
    },

    localKeys () {
      return [...Object.keys(this.$data), ...Object.keys(this._computedWatchers), ...Object.keys(this).filter(k => k.startsWith('local'))]
    },

    // 处理最大显示长度后的列
    allColumns () {
      let results = []
      // 设置 scroll 属性后，需要设置所有列的 width 来避免表头和内容的错位。
      // 对未设置 width 的 col 设置平均宽度
      const fullWidth = this.localScroll.x || (this.$el || {}).offsetWidth - 85
      const remainWidth = this.columns.reduce(
        (remain, { width }) => width
          ? typeof width === 'string' && width.endsWith('%')
            ? remain - parseFloat(width) * fullWidth / 100
            : remain - parseFloat(width)
          : remain,
        fullWidth
      )
      const noWidthColCount = this.columns.reduce((count, { width }) => width ? count : count + 1, 0)
      const averageWidth = remainWidth / noWidthColCount
      this.columns.forEach(col => !col.width && Vue.set(col, 'width', averageWidth))

      results = this.columns.reduce((results, col) => {
        // 超出后显示省略号
        if (this.isDrag || col.key !== 'action') {
          // 组件不支持排序省略一起使用，使用排序后，表头省略会失效
          col.ellipsis = true
        }
        const result = Object.assign({}, col)
        results.push(result)
        return results
      }, results)

      return results
    },
    localColumns () {
      return this.allColumns.filter(col => this.filterValue.includes(col.dataIndex || col.key || col.title))
    },
    // 不支持表格中有子表格，需要屏蔽
    localComponents () {
      const headerComponent = {}
      if (!this.isDrag) return headerComponent
      headerComponent.header = {}
      headerComponent.header.cell = (h, props, chi