1、引入组件

import RemoteTable from "@/components/RemoteTable";

2、父组件

<RemoteTable
          :columns="columns"
          :pageInfo="pageInfo"
          :pagination="pagination"
          :showPageInfo="true"
          :isFixedHeader="true"
          :showCount="true"
          :loading="loading"
          @onchangePage="onchangePage"
          @onChangeSize="onChangeSize"
          @bandleTableCheck="onTableCheck"
          @tableIndex="tableIndex"
          @onSortChange="onSortChange"
        >
        </RemoteTable>

      columns: [],  // 头部
      pageInfo: [], // 数据源
      pagination: {   // 分页信息
        page_size: 10,
        total: 0,
        current_page: 1,
      },

onchangePage、onChangeSize: 分页方法;
onTableCheck: 选中的方法;
onSortChange: 排序的方法;

3、 子组件

<template>
  <div>
    <Table 
      :maxHeight="isFixedHeader ? '500' : 'auto'" 
      :columns="columns" 
      :data="pageInfoList" 
      border 
      :loading="loading"
      size="small" 
      @on-select="handleSelect"
      @on-select-cancel="handleSelectCancel"
      @on-select-all="handleSelectAll" 
      @on-select-all-cancel="handleSelectAllCancel"
      @on-sort-change="handleSortChange" 
      ref="tables"
      >
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="show(row, index)">详情</Button>
        </template>
      </Table>
    <div :style="{textAlign: 'right'}" v-if="showPageInfo" style="margin-top: 20px">
      <Page 
        :total="pagination.total" 
        :current="pagination.current_page" 
        :page-size="pagination.page_size"
        show-total 
        :page-size-opts='[10, 20, 50, 100]' 
        show-elevator 
        show-sizer 
        placement="top" 
        @on-change="handlePageChange" 
        @on-page-size-change="handlePageSizeChange" />
    </div>
  </div>
</template>

<script>
  import {Table, Page, Button } from 'view-design';

  export default {
    name: 'remoteTable',
    components: {
      Table,
      Page,
      Button
    },
    props: {
        // 表头
        columns: Array,

        // list
        pageInfo: Array,
        pagination: Object,

        /** 是否显示分页 */
        showPageInfo: {
            type: Boolean,
            default: () => {
                return true
            }
        },
        
        /** 是否固定表头，如果固定表头，会默认给 600 的高度**/
        isFixedHeader: {
            type: Boolean,
            default: false
        },
        loading: {
          type: Boolean,
          default: () => true
        }
    },

    data() { 
      return {
        /** 当前tables中存在且选中的行 */
        pageInfoList: this.pageInfo,
        selectedRows: []
      };
    },
    watch: {
      'pageInfo' (newVal, oldVal) {
        if (newVal) {
          this.pageInfoList = newVal;
          this.handleTableCheckd(newVal);
        }
      }
    },
    created () {
    },
    methods: {
      show (row, index) {
        this.$emit('tableIndex',row, index)
      },
      /**
       *    切换分页,拿到勾选数据
       */
      handleTableCheckd (list) {
        this.selectedRows.forEach(el => {
          list.forEach(e => {
            if (el.id === e.id) {
              e['_checked'] = true;
            }
          })
        })
      },

      /**
       *    单选
       */
      handleSelect(selection, row) { 
        this.selectedRows.push(row);
        // this.selectedRows.push(row.id);
        this.pageInfoList.forEach(el => {
          if (el.id === row.id) {
            el['_checked'] = true;
          }
        });
        this.$emit('bandleTableCheck', this.selectedRows);
      },

      /**
       *    单选取消
       */
      handleSelectCancel (selection, row) {
        this.selectedRows.forEach((el, index) => {
          if (row.id === el.id) {
            this.selectedRows.splice(index, 1);
          }
        })
        this.$emit('bandleTableCheck', this.selectedRows);
      },

      /**  
       *    全选
       */
      handleSelectAll (selection) {
        selection.forEach(el => {
          this.selectedRows.push(el)
          // this.selectedRows.push(el.id)
        })
        this.selectedRows = Array.from(new Set(this.selectedRows));
        this.$emit('bandleTableCheck', this.selectedRows);
      },

      /**
       *    取消全选
       */
      handleSelectAllCancel (selection) {
        this.pageInfoList.forEach(el => {
          this.selectedRows.forEach((e, index) => {
            if (el.id === e.id) {
              this.selectedRows.splice(index, 1);
            }
          })
        })
        this.$emit('bandleTableCheck', this.selectedRows);
      },

      handleSortChange(sort) {
        this.$emit("onSortChange", sort);
      },

        /** 
         *      切换每页的回调 
         */
        handlePageChange(currentPage) {
            this.$emit('onchangePage', currentPage)
        },

        /** 
         *      切换每页条数的回调 
         **/
        handlePageSizeChange(size){
            this.$emit('onChangeSize', size)
        }
    }
  };
</script>

<style scoped lang="less">
  .ivu-table .demo-table-info-row td{
        background-color: #fff;
        color: red;
    }
    .show_count {
      text-align: right;
    }
</style>