1. Requirements
Use Vue + Element UI to add a copy button to the action bar of the list. Copying the data in the current row can open the new pop-up window and jump to the new page. This article is implemented as jump to the new page.
2. Realize
1) List page
<el-table>
<!-- Other columns -->
<el-table-column label="operate" width="150">
<template slot-scope="scope">
<el-button icon="el-icon-copy-document" title="copy" @click="toCopyNew()"></el-button>
</template>
</el-table-column>
</el-table>
Method part: Use id to distinguish, the normal id is 0, and the copy id is not 0
methods: {
// copy toCopyNew (item) {
const { url } = this.$getKey('This is a business permission value, you can not write it here if you don't need it')
this.$(`/${url}-New/${}`)
},
}
2) Add a new page
data () {
return {
id: this.$,
dataList: [],
form: {
Name: '',
BG: '',
InfoJson: [],
},
rules: {
Name: [
{ required: true, message: 'Please enter a name', trigger: 'blur' },
],
BG: [
{ required: true, message: 'Please select the organization you belong to', trigger: 'change' },
],
InfoJson: [
{ required: true, message: 'Please select a collection', trigger: 'blur' },
],
},
submitLoading: false,
}
},
created () {
if ( !== '0') {
this._getDetail()
}
},
methods: {
async _getDetail () {
try {
// Get the details interface const data = await GetInfo({
Id: * 1,
})
if (data) {
= data
= ''
=
= { Id: data.BG_Id, Name: data.BG_Name }
= ()
=
}
} catch (error) {}
},
}
3) Problem
After following the above code operation, clicking the copy button in the list operation bar will jump to the new page and copy the data of the current line to the corresponding components. The data is presented and saved normally, but a problem was found, and the data cannot be modified. You should obtain detailed information asynchronously when searching the information online. Whether there is any problem with the return data when the data is obtained, etc. The specific analysis is as follows.
① Asynchronous problem
Ensure that the data acquisition is done asynchronously. If your data is obtained through an asynchronous request, make sure not to perform any assignments before the data is returned. You can use async/await or .then() syntax to ensure that the asynchronous request is completed before assignment.
② Is the data correct?
Make sure that the data you are queried is correct. You can print the query data on the console to make sure it contains the information you need.
③ Reactivity
The responsiveness in the data attributes is achieved through getters and setters. Make sure you are using a responsive system to update your data. If you are modifying data in asynchronous operations, make sure to perform these operations in the context.
④ Whether the component is rendered correctly
Make sure the component is rendered correctly and that the data you are trying to change is visible in the component. You can use double curly braces {{ variable }} in the component's template to output data to make sure they are displaying correctly.
4) Solve
After troubleshooting, the problem in this article is periodic and responsive. The specific modification is to adjust Sunday created to mounted, and the assignment method of data return is changed to responsive acquisition. The ideas and codes are as follows:
① The previous asynchronous call to the method in the created hook may cause the component rendering to be completed before the data is retrieved, which may cause the data to be unable to be properly bound to the component. Move the data acquisition into the mounted hook, because the mounted hook is fired after the component has been mounted to the DOM, which ensures that the component has been rendered.
② Objects are required to be responsive to trigger view updates when data changes. Make sure your form object is declared in data and uses or this.$set to ensure the responsiveness of nested properties.
mounted () {
if ( !== '0') {
this._getDetail()
}
},
methods: {
async _getDetail () {
try {
// Get the details interface const data = await GetInfo({
Id: * 1,
})
if (data) {
= data
= ''
// Use or this.$set to ensure responsiveness this.$set(, 'Name', data.RG_Name)
this.$set(, 'Sign', data.RG_Sign)
this.$set(, 'BG', { Id: data.BG_Id, Name: data.BG_Name })
this.$set(, 'Sign', data.RG_Sign)
this.$set(, 'RuleJson', ())
=
}
} catch (error) {}
},
}
5) Here are some other reasons for easy investigation
① Ensure the data binding is correct
Use double braces {{ variable }} in the template to output data to ensure that the data is correctly bound to the component. For example, you can add some output statements to the template:
<template>
<div>
{{ }}
{{ }}
<!-- Output statements for other components -->
</div>
</template>
This will help you determine if data is correctly passed to the component
② Check the data type and structure
Make sure that the data returned by GetInfo is consistent with what you expect in . You can use (data) in the mounted hook to view the retrieved data structure.
async _getDetail () {
try {
const data = await GetInfo({
Id: * 1,
})
(data); // View the data structure // ... Other codes } catch (error) {}
}
③ Check whether there is any error message
Check the browser console for any error messages. There may be network request issues or other issues that cause data to not load correctly.
④ Ensure that the component's form data object is responsive
Objects are required to be responsive to trigger view updates when data changes. Make sure your form object is declared in data and uses or this.$set to ensure the responsiveness of nested properties.As in this article
This is the article about Vue+Element UI's function of copying current row data. For more related contents of copying current row data, please search for my previous articles or continue browsing the following related articles. I hope everyone will support me in the future!