Vue Element UI如何实现复制当前行数据而不影响新增页面组件值？
摘要：1、需求 使用Vue + Element UI 实现在列表的操作栏新增一个复制按钮，复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面，本文实现为跳转到新增页面。 2、实现 1）列表页 index.vue &a
1、需求
使用Vue + Element UI 实现在列表的操作栏新增一个复制按钮，复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面，本文实现为跳转到新增页面。
2、实现
1）列表页 index.vue
<el-table>
<!-- 其他列 -->
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button icon="el-icon-copy-document" title="复制" @click="toCopyNew(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
方法部分：用id来区分，正常新增id为0，复制id不为0
methods: {
// 复制
toCopyNew (item) {
const { url } = this.$getKey('这是是业务权限值，不需要这里可以不写')
this.$router.push(`/${url}-New/${item.Id}`)
},
}
2）新增页 New.vue
data () {
return {
id: this.$route.params.id,
dataList: [],
form: {
Name: '',
BG: '',
InfoJson: [],
},
rules: {
Name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
],
BG: [
{ required: true, message: '请选择所属组织', trigger: 'change' },
],
InfoJson: [
{ required: true, message: '请选择集合', trigger: 'blur' },
],
},
submitLoading: false,
}
},
created () {
if (this.id !== '0') {
this._getDetail()
}
},
methods: {
async _getDetail () {
try {
// 获取详情接口
const data = await GetInfo({
Id: this.id * 1,
})
if (data) {
this.form = data
this.form.id = ''
this.form.Name = data.Name
this.form.BG= { Id: data.BG_Id, Name: data.BG_Name }
this.form.InfoJson= JSON.parse(data.InfoJson)
this.dataList = this.form.InfoJson
}
} catch (error) {}
},
}
3）问题
按上述代码操作后，点击列表操作栏的复制按钮会跳转到新增页面并且将当前行的数据复制到对应各个组件内，数据呈现和保存正常，但是发现了一个问题，数据无法修改，网上查阅资料应该异步获取详情信息且数据获取时打印输出下返回数据是否有问题等，具体分析如下
① 异步问题
确保数据的获取是异步完成的。如果你的数据是通过异步请求获取的，确保在数据返回之前不要执行任何赋值操作。你可以使用async/await或者.then()语法确保异步请求完成后再进行赋值。
② 数据是否正确
确保你查询到的数据是正确的。你可以在控制台打印查询到的数据，确保它包含你所需的信息。
③ Reactivity（响应性）
Vue.js中的响应性是通过数据属性的getter和setter来实现的。