Design of tablewithpage

TableWithPage The design of the

The component is TTable、TPage The combination of , The specific documents refer to the respective components .

We found that for businesses that want to use forms , We usually need to use table and pagination. But in elementUI Document introduction , We can only manually import table and pagination Two components and merge them , Based on this idea , We decided to write a component that would table and pagination Integration , Write a form component with pagination .

Because a component can only have one root node , So the two components are one section The parcel , If you need to change the style, please add... To the component by yourself class、style( Will be set to the root element of the component )

  render(h) {
    
    return h(
      'section',
      null,
      this.resolveChildren(h)
    );
  }

First, let's think about merging the two components , So how to define props Well , How will it be different props Values are passed to different components ？

  props: {
    
    data: {
    
      type: Array,
      required: true
    },

    //  Used to add... To a table  loading
    loading: {
    
      type: Boolean,
      default: false
    },

    //  Whether in  current-page  Reset table body when changing  scrollTop
    resetToTop: {
    
      type: Boolean,
      default: false
    },

    pageProps: {
    
      type: Object,
      default: () => ({
    })
    },
    hasDelete: {
    
      type: Boolean,
      default: false
    },
    resetIndex: {
    
      type: Boolean,
      default: false
    }
  },

Of course, the most important data Yes ,loading For display loading style . Define one separately pageProps Used to receive incoming pagination Value . Considering that the drop-down box will appear when the form height is less than the content height , Whether to change the number of pages scrollTop Also reset , So an extra one is added resetToTop.

Next, let's look at how to generate two components , Because I defined one pageProps receive pagination Of props, So the other props By default, they are passed to table Of , So it's generating ttable Use of components attrs Receive other unused props

methods: {
    
  resolveChildren(h) {
    
    return [this.resolveTableChild(h), this.resolvePageChild(h)];
  },
  resolveTableChild(h) {
    
    return h(
      'TTable',
      {
    
        ref: 'table',
        props: {
     data: this.data },
        attrs: {
     ...this.$attrs },
        on: {
     ...this.$listeners },
        scopedSlots: {
     ...this.$scopedSlots },
        directives: [
          {
    
            name: 'loading',
            expression: 'loading',
            value: this.loading
          }
        ]
      }
    );
  },
}

about pagination nothing more , The required props It's all through pageProps Wear it , So we have to deal with the listener . Of course , Also handle incoming slot, The practice here is fixed slot For the name of the pagination. At the same time, you should also listen for changes in the number of pages .

  resolvePageChild(h) {
    
      const pageDefaultSlot = this.$scopedSlots.pagination;
      const children = pageDefaultSlot ? pageDefaultSlot() : [];

      const listeners = {
    
        'current-change': this.handleCurrentChange
      };
      this.$listeners['size-change'] && (listeners['size-change'] = this.$listeners['size-change']);
      this.$listeners['page-change'] && (listeners['page-change'] = this.$listeners['page-change']);
      this.$listeners['prev-click'] && (listeners['prev-click'] = this.$listeners['prev-click']);
      this.$listeners['next-click'] && (listeners['next-click'] = this.$listeners['next-click']);

      return h(
        'TPage',
        {
    
          ref: 'page',
          props: {
    
            ...this.pageProps,
            resetIndex: this.resetIndex
          },
          attrs: {
     ...this.pageProps },
          on: {
    
            'update:reset-index': this.updateResetIndex,
            ...listeners
          }
        },
        children
      );
    },

    handleCurrentChange(currentPage) {
    
      if (this.resetToTop) {
    
        //  Find the corresponding element and scrollTop Value is set to 0
        this.$refs.table.$el.querySelector('.el-table__body-wrapper').scrollTop = 0;
      }

      //  Because tables also have  current-change  event , So change it  pagination  Of  current-change  The name of the event as a distinction 
      this.$emit('page-current-change', currentPage);
    },

There is an extra one exposed here page-current-change Method to get a change in the number of pages .

slots

Table slots

Default slot 、 stay columns Slots declared in 、append Slots are passed to TTable Components

Paging slot

A named slot pagination, Will pass to TPage Components

events

$listeners Will be passed on to TTable Components

size-change、page-change,prev-click,next-click Will be passed on to TPage

because ElTable Also have current-change event , therefore TPage Of current-change Event changed to listen page-current-change

methods

Support all ElTable Methods

Example

A simple example ( With request )

<template>
  <el-button type="primary" @click="handleSearch"> Search for </el-button>
  <!--
 	 first  style  Is to set the style of the component root element 
	 the second  height  The attribute is   Appoint  Table  Component's  height prop
  -->
  <table-with-page
    style="height: 100%;"
    height="94%"
  	:data="tableData"
    :columns="tableColumns"
    :loading="tableLoading"
    :page-props="pageProps"
    @page-change="handlePageInfoChange"
  >
    <template v-slot:operate="{ row }">
      <el-button type="text" @click="handleDelete(row)"> Delete </el-button>
    </template>
  </table-with-page>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [],
        tableColumns: [
          { type: 'index', label: ' Serial number ' },
          { prop: 'name', label: ' full name ' },
          { prop: 'age', label: ' Age ' },
          { slotName: 'operate', label: ' operation ' }
        ],
        tableLoading: false,
        total: 0,
        hasDelete: false,
        shouldResetIndex: false
      }
    },
    computed: {
      pageProps() {
        const { total } = this;
        return {
          total,
          align: 'center'
        };
      }
    },
    watch: {
      //  When paging information changes , Auto search 
      pageInfo(newVal) {
        if (!newVal) {
          return;
        }
        
        this.handleSearch();
      }
    },
    methods: {
      async handleDelete(row) {
        try {
          await SomeService.delete(row.id);
          //  It will trigger once  page-change  event , And then automatically get the data 
          this.hasDelete = true;
        } catch (e) {
          console.error(e);
        }
      }
      handleSearch(e) {
        if (e) {
          //  It will trigger once  page-change  event , And then automatically get the data , So you can just go back here 
          this.shouldResetIndex = true;
          return;
        }
        
        const params = this.getParams();
        this.search(params);
      },
      getParams() {
        return { ...this.pageInfo };
      },
      async search(params) {
        this.tableLoading = true;
        
        try {
          const { total, records } = await SomeService.search(params);
          this.total = total;
          this.tableData = records;
        } catch(e) {
          console.error(e);
        }
        
        this.tableLoading = false;
      },
      handlePageInfoChange(pageInfo) {
        this.pageInfo = pageInfo;
      }
    }
  }
</script>

Last

Source check ：https://github.com/leopord-lau/Twpage

npm install

npm i twpage --save-dev