<template>
  <div class="ps-table">
    <el-table :data="data" ref="tableDefalut" v-loading="loading" :border='border' @select-all='selectAll' @select='select'
      @row-click="handleRowClick" :height="height" v-bind="$attrs">
      <slot></slot>
    </el-table>
    <ps-pagination v-if="isPagination" :pageObj="pageObj" :sizes="sizes" :layout="layout"></ps-pagination>
  </div>
</template>

<script>
export default {
  name: "PsTable",
  props: {
    data: {
      type: Array,
      default: () => []
    },
    height: null,
    border: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    pageObj: {
      type: Object,
      default: () => { }
    },
    isPagination: {
      type: Boolean,
      default: true
    },
    sizes: {
      type: Array,
      default: () => [10, 20, 30, 40, 50, 60, 70, 80, 100, 200]
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    }
  },
  data() {
    return {

    };
  },
  created() {

  },
  mounted() {
  },
  methods: {
    selectAll(selection) {
      this.$emit('select-all', selection);
    },
    select(selection, row) {
      this.$emit('select', selection, row);
    },
    handleRowClick(row, column, event) {
      this.$emit('rowClick', { row, column, event })
    },
    toggleRowSelection(params) {
      return this.$refs.tableDefalut.toggleRowSelection(params)
    },
    clearSelection(params) {
      return this.$refs.tableDefalut.clearSelection(params)
    },
  },
};
</script>

<style></style>
