How to solve the problem of el-table repeated loading

question

Used in the projectelementuiFriends who develop the form know,el-tableAdding loading animations is usually usedv-loadingInstructions, added during the creation loadingvariables to control.

However, as there are more and more tables, a loading variable must be added every time. At the same time, the loading control logic must be coupled to the method of requesting data.

Too much repetitive work not only reduces efficiency but also makes the code difficult to maintain.

Solution

useMixin + Proxy

• The first step is to create a method that uses the Proxy proxy to request data as a mixingetTableData

export default {
  data() {
    return {
      loading: false,
    }
  },
  created() {
    = new Proxy(, {
      apply: (target, context, argumentsList) => {
         = true
        let res = (context, argumentsList)
        if(!(res instanceof Promise)) {
          throw new Error('Request should return an promise instance')
        }
        (() => {
           = false
        })
      }
    })
  }
}

• The second step is to use the introduction of mixin in the assembly

<script>
import loading from './'
export default {
  mixins: [loading],
  methods: {
     async getTableData() {
	    let res = await apiRequest()
	     = 
	 }
  }
</script>

Online effect preview

codePen online effect preview

Summarize

By using , we can free ourselves from repeated loading work once and for all, while avoiding miswrites and missed codes, and the robustness and maintainability of the code have also become higher.

For those who don’t know much about vue2’s mixin or Proxy, you can refer to the official documentation below.

Vue2 Documentation: Reusability Mix

MDN Documentation: Using Proxy Proxy Method ()

The above is personal experience. I hope you can give you a reference and I hope you can support me more.