Daily development and sharing

Encapsulation merging of the ElementUi Table Table with the paging component

Purpose of encapsulation

• Improve development efficiency
• Reduce code repeatability
• Improve maintainability
• Easier to use

Comparison before and after packaging

Before packaging

 <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="Date"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="Address">
      </el-table-column>
    </el-table>
  </template>
  
   <el-pagination
    layout="prev, pager, next"
    :total="50">
  </el-pagination>
  
  data(){
      return{
          pageOPtions: {},table: {}}}Copy the code

After the encapsulation

<template>
  <div>
    <PjTable
      :columns="columns"
      :list="list"
      :pagination="pagination"
    />
  </div>
</template>

<script>
import table from "./mixins/table";
import { get } from "@/api/table.js"
export default {
  name: 'home'.mixins:[ table ],
  created() {
    this.init()
  },
  methods: {init(){
      this.getData()
    },
    async getData(){
      let result = await get()
      this.list = result.data
      this.pagination.total = result.meta.pageoptions.total
      console.log(result)
    }
  }
}
</script>
Copy the code

How is encapsulation carried out

The main concept of packaging is configuration generation. Using the function of VUE mixin, components are separated into two parts to achieve the purpose of generating pages from configuration. The following is the brief code of the main packaged components.

<! -- @name: PjTable @author: pj@description: Encapsulate element table --><template>
  <div class="table">
    <el-table
       :data="list"
       :stripe="options.stripe"
       :border="options.border"
       :showSummary="options.showSummary"
       @selection-change="handleSelectionChange"
    >
      <! -- Enable select box -->...<! -- Set table header -->
      <template v-for="(column,index) in columns">
        <el-table-column
           :key="column.prop"
           :prop="column.prop"
           :label="column.label"
           :fixed="column.fixed"
           :width="column.width"
           :sortable="column.sortable"
           :sort-method="column.sortMethod"
           :filters="column.filters"
           :align="column.align || 'center'"
           :filter-method="column.filters? handleFilter:undefined"
        >
          <! Support for embedding other components -->
          <template slot-scope="scope">
            <template v-if=! "" column.render">
              <template v-if="column.formatter">
                <span v-html="column.formatter({row:scope.row, column:column,vm:$parent})"/>
              </template>
              <template v-else>
                <span>{{ scope.row[column.prop] }}</span>
              </template>
            </template>
            <template v-else>
              <renderDom :column="column" :row="scope.row" :vm="$parent" :render="column.render"
                         :index="index"/>
            </template>
          </template>
        </el-table-column>
      </template>

      <! Render action button Group -->.</el-table>

    <! - page - >
    <div class="page" v-if=! "" $globalUtils.isNull(pagination) && list.length > 0">
      <el-pagination
         :layout="pagination.layout || 'total, sizes, prev, pager, next, jumper'"
         @size-change="watchPageSize"
         @current-change="watchPageIndex"
         :background="pagination.background"
         :current-page="pagination.currentPage"
         :total="pagination.total"
         :page-sizes="pagination.pageSizes"
         :pagerCount="pagination.pagerCount"
         :page-size="pagination.pageSize"
      />
    </div>
  </div>
</template>

<script>
// createElement
export default {
  name: "PjTable".components: {
    renderDom: {
      functional: true.props: {
        row: Object.render: Function.vm: Object.index: Number.column: {
          type: Object.default: null}},render: (h, ctx) = > {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index
        }
        if (ctx.props.column) params.column = ctx.props.column
        return ctx.props.render({ h, params, vm: ctx.parent })
      }
    }
  },
}
</script>
Copy the code

Complete usage Example

// Component part
<template>
  <div>
    <PjTable
      :columns="columns"
      :list="list"
      :pagination="pagination"
    />
  </div>
</template>

<script>
import table from "./mixins/table";
import { get } from "@/api/table.js"
export default {
  name: 'home'.mixins:[ table ],
  created() {
    this.init()
  },
  methods: {init(){
      this.getData()
    },
    async getData(){
      let result = await get()
      this.list = result.data
      this.pagination.total = result.meta.pageoptions.total
      console.log(result)
    }
  }
}
</script>
Copy the code

// mixin
const columns = [
    { prop:"name".label:"Name" },
    { prop:"sex".label:"Gender" },
    { prop:"age".label:"Age" },
    { prop:"mobile".label:"Mobile phone Number"},]const pagination = {
    pageSize: 10.currentPage: 1.total: 0,}const mixin = {
    data(){
        return{
            columns,
            list:[],
            pagination
        }
    }
}

export default mixin
Copy the code