vue TablePaging组件

index.vue

<script>
import './index.scss'
export default {
  name: 'TablePaging',
  props: {
    maxHeight: {
      type: String,
      default: '100%'
    },
    tableList: { // table 数据
      type: Array,
      default: () => ([])
    },
    tableColumn: { // table 的 column
      type: Array,
      default: () => ([])
    },
    tableButtons: { // table 按钮
      type: Array,
      default: () => ([])
    },
    tableBtnWidth: { // 按钮宽度
      type: Number,
      default: 200
    },
    tableBtnFixed: { // 操作栏固定
      type: Boolean,
      default: true
    },
    tablePaging: { // table 分页配置
      type: [Object, Boolean],
      default: false
    },
    tableTotal: { // table 总页数
      type: Number,
      default: 0
    },
    tableLoading: {
      type: Boolean,
      default: false
    },
    pagingChange: { // 分页信息改变
      type: Function,
      default: () => {}
    },
    page: {
      type: Number,
      default: 0
    },
    pagesize: {
      type: Number,
      default: 0
    },
    serialIsHide: Boolean, // 是否隐藏序号
    selection: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultAttars: { // 按钮默认配置
        type: 'text',
        size: 'small'
      }
    }
  },
  methods: {
    handleClick(e, row, click) { // 表单按钮点击
      e && e.stopPropagation && e.stopPropagation()
      click && click(row.id, row)
    },
    handleSizeChange(size) { // 分页一页显示条数改变回调
      this.$emit('pagingChange', {
        ...this.tablePaging,
        pagesize: size
      })
    },
    handleCurrentChange(page) { // 分页当前页数改变回调
      this.$emit('pagingChange', {
        ...this.tablePaging,