This is the sixth day of my participation in the August More Text Challenge.Juejin. Cn/post / 698796…

The interface is loaded with v-loading until the data is sent to the interface.

Read the newspaper first wrong:Failed to resolve directive: loading

Add v-loading = “loading” to table

To add to main.js:

import { Loading } from 'element-ui';
Vue.use(Loading.directive);
Copy the code

Add v-loading=”loading” to the table header

Effect:

Found that the header is covered is not the desired effect!

Implement partial loading effects (without table headers)

Do not import in main.js to import in components

import { Loading } from 'element-ui';
Copy the code

In the method:

GetTableData () {this.loading && this.loading. Close (); // loading. Service (options); // Loading. This.loading = loading.service ({// lock: true, // lock the screen scrolling text: "loading ", // load the copy backgroundColor: "Rgba (55,55,55,0.4)", // background color spinner: "El-icon-loading ", // loading ICONS // can be used directly with the selector name, of course, can be used to retrieve DOM structure, DOM structure cache, // so that the frequent trigger will not reload DOM. Target: document.querySelector(".el-table__body") // Loading a DOM node to overwrite (default: body}); getyuyueTableData(this.formData) .then(res => { setTimeout(() => { this.loading.close(); }, 500); }) .catch(err => { this.$message.error(err); }); },Copy the code

Note: To retrieve the DOM, send the request in Mounted ()

this.loading && this.loading.close(); // This is to prevent the loading from being triggered consecutively before the loading is finished

  • This code was added to prevent the effect of clicking on the send request