page-table.vue

<template>
    <div :class="['page-table-wrapper', tabVue.rootClass]">
    <div class="table-wrapper__search" v-if="hasSearchSlot()">
      <table-search 
        @handleConfirmSearch="tabVue.confirmSearch()"
           @handleClearSearch="tabVue.clearSearch()">
        <slot name="search"></slot>
          </table-search>
      </div>
    <div class="table-wrapper__content">
      <div class="table-wrapper__content--toolbar">
          <table-operation :parent="tabVue" :config="tabVue.OperationController">
          <slot name="operationLeft" slot="left" v-if="!noOperationLeftsSlots"></slot>
          <slot name="operationRight" slot="right" v-if="!noOperationRightsSlots"></slot>
              </table-operation>
          </div>
      <basic-table :parent="tabVue">
        <template slot="tableColumn" slot-scope="scope">
          <slot name="tableColumn" :row="scope.row" :columnItem="scope.columnItem"></slot>
                </template>
                <template slot="tableRowDetail" slot-scope="scope">
          <slot name="tableRowDetail" :row="props.row"></slot>
                </template>
      </basic-table>
      </div>
  </div>
</template>
<script>
import { tableSearch } from '@/components/table-search';
import basicTable from './basic-table';
import { tableOperation } from '@/components/table-operation';
import _ from 'lodash';
export default {
    components: { tableSearch, basicTable, tableOperation },
  props: {
      parent: {    /* 指定父组件的this */
        type: Object
    }
  },
  data() {
      return {
        tabVue: this.parent || this.$parent
    }
  },
  computed() {
      noOperationLeftsSlots() {
        return _.isEmpty(this.$slots.operationLeft);
    },
    noOperationRightsSlots() {
        return _.isEmpty(this.$slots.operationRight);
    }
  },
  methods: {
      /* 判断是否有搜索插槽 */
    hasSearchSlot() {
        return this.$slots.search;
    }
  }
}
</script>