Vue.js manages the encapsulation of background table components

Problem Analysis

Why encapsulation
What are the contents of the package?

Encapsulate table component

Confirm data format
Package components

Encapsulating global components
Table component encapsulation

Paging component encapsulation

Data Definition

Encapsulation

Summarize

I recently started a new project and briefly talked about my own table encapsulation.

Problem Analysis

Why encapsulation

First of all, why encapsulate? Is it because of the pursuit of technology? No, it’s because of laziness. I don’t want to keep pasting and copying codes, so I want to encapsulate the table. When creating a new table, I only need to fill in the data.

What are the contents of the package?

There are two main ones, one is the table component and the other is the paging component

Once you understand this, you can start packaging components.

Encapsulate table component

Confirm data format

First determine the data format, for this we need to look at the el-table component

<el-table :data="tableData" style="width: 100%">
   <el-table-column prop="date" label="Date" width="180" />
   <el-table-column fixed="right" label="Operation" width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">View</el-button>
        <el-button type="text" size="small">Edit</el-button>
     </template>
   </el-table-column>
</el-table>

Now let's consider data types, such as lebel, prop, widht button type, event, etc.

let paramsType = {
  data: Array, // data loading: Boolean,
  selectionShow: Boolean,
  columns:Array = [
    { 
      label: String,
      prop: String,
      filter: Function,
      isSlot: Boolean,
      width: Number,
      tempalte: Function,
      btns: Array = [
        { name: String,
          btnType: String,
          clickType: String,
          routerType: String,
          url: String,
          query: Function,
          btnClick: Function
        }
      ]
    }
  ] 
}

After defining the data document, we can start encapsulating components

Package components

Encapsulating global components

The reason for encapsulating global components is to save trouble. The whole purpose is to be lazy.

Create a components file under src and write our components in it. It is recommended that each component be placed in a separate folder for easy maintenance.

Create your own table.vue component. Mine is called FrTable. Let’s not talk about the content for now, let’s talk about the reference first.

Global use

Import the FrTable file into the index.js file under components, traverse all components here, and export

The code is as follows:

import TrTable from './FrTable/index'

const components = [TrTable]

const install = (Vue) => {
  components.map(component => {
    Vue.component(component.name, component)
  })
}

if (typeof Window !== 'undefined' && window.Vue) {
  install(Window.Vue)
}

export default {
  install
}

Then export it to main.js and use the component through Vue.use() as follows

import globalComponents from '@/components/index'
Vue.use(globalComponents)

Use in the page

<fr-table />

Table component encapsulation

Questions to consider

How many cases are there in the table?

Normal data type display
Unique display method
With operation button

For the first type, we don’t actually need to do too much, we just need to render it through a for loop.

The second one is actually okay, we can customize it through slot

The third type is button operation. Buttons can actually be divided into many types

Type of button

Normal use of buttons, click functionality
Button jump function
The button opens a new page
Button acts as a custom event

Code writing

Through the above, we have analyzed all the problems of the table, now we just need to type the code.

First case

<el-table :data="data" border :loading="loading">
        <!-- Check -->
   <el-table-column v-if="selectionShow" type="selection" width="50" align="center" :reserve-selection="true" />
     <template v-for="(item, index) in columns">
        <el-table-column :key="index" v-bind="item">
            <!-- Custom header -->
          <template v-if="item.customHeader" slot="header">
              <slot :name="item.headerProp" />
          </template>
          <template slot-scope="scope">
               <span v-html="handleFilter(item, scope.row, item.prop)" />
          </template>
        </el-table-column>
     </template>
 </el-table>

Here we can see the handleFilter method

This method processes the data.

Data types are divided into normal data types, data types that need to be converted, and data types converted by templates.

The code is as follows

handleFilter(item, val, prop) {
  let value = val[prop]
  if (item.templet) value = item.templet(val)
  return item.filter ? this.$options.filters[item.filter](val[prop]) : value
},

The first case is relatively simple, just simple data rendering and customized header rendering. The overall above is a multi-select function + normal form

Second case

Customized List

<template slot-scope="scope">
   <!-- Custom content -->
   <slot
      v-if="item.isSlot"
      :name="item.prop"
      :row="scope.row"/
   >
</template>

For custom categories, we only need to set isSlot to true, name to prop, and row to data

The third

The third button has four situations

<template v-if="item.btns">
   <el-button
     v-for="(btn, i) in item.btns"
     :key="i"
    class="mr_10"
    :size="btn.mini ? btn.mini: 'small'"
    :type="btn.type ? btn.type: 'primary'"
    @click="btnClickfunc(btn, scope.row)"
  >
     {{ btn.name }}
  </el-button>
</template>

The button is actually rendered in a loop, mainly for event analysis, which is operated through the btnClickfunc event.

btnClickfunc(column, row) {
      const path = {
        [column.routerType]: column.url,
        query: column.query ? column.query(row) : ''
      }
      if (column.clickType === 'router') {
        this.$router.push(path)
      } else if (column.clickType === 'router_blank') {
        const routeData = this.$router.resolve(path)
        window.open(routeData.href, '_blank')
      } else if (column.clickType === 'btnClick') {
        column.btnClick(row)
      } else {
        this.$emit('btnClickFunc', { column: column, row: row })
      }
},

We handle different types of products differently.

The value of props

The current parameters are consistent with the parameters we defined, so the code is as follows

  // data: {
      type: Array,
      required: true
    },
    // Table header parameters columns: {
      type: Array,
      required: true
    },
    loading:
      type: Boolean,
      default: false
    },
    //Multiple selection box selectionShow: {
      type: Boolean,
      default: false
    },

From now on, the only thing left is how to use the component.

Use of components

<fr-table
      ref="mt"
      :loading="loading"
      :data="list"
      :columns="columns"
    >
</fr-table>

It's roughly as follows. If you need to use multiple selection, define the method yourself, and the same applies to sorting.

Paging component encapsulation

Refer to element paging component

<el-pagination
  style="margin-top:40px;"
  background
  layout="prev, pager, next"
  :page-size="pageLimit"
   :total="total"
   :current-page="currentPage"
   @current-change="handleCurrentChange"
/>
handleCurrentChange(val) {
   console.log(val)
}

Data Definition

The definition is as follows:

total: Number,
pageLimit: Number,
currentPage: Number,

Encapsulation

<el-pagination
  style="margin-top:40px;"
  background
  layout="prev, pager, next"
  :page-size="pageLimit"
  :total="total"
  :current-page="currentPage"
  @current-change="handleCurrentChange"
/>

handleCurrentChange(val) {
   this.$emit('currentChange', val)
}

It looks simple, doesn’t it? It is that simple.

Then we add the paging events and parameters to the component, and the component encapsulation of our entire table is completed. So far, we have completed all the work of encapsulating the entire table component.

Summarize

This is the end of this article about the encapsulation of the vue.js management background table component. For more relevant vue background table encapsulation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: