1、需求
使用Vue + Element UI 實現(xiàn)在列表的操作欄新增一個復制按鈕，復制當前行的數(shù)據(jù)可以打開新增彈窗后亦可以跳轉(zhuǎn)到新增頁面，本文實現(xiàn)為跳轉(zhuǎn)到新增頁面。
2、實現(xiàn)
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來區(qū)分，正常新增id為0，復制id不為0
methods: {
// 復制
toCopyNew (item) {
const { url } = this.$getKey('這是是業(yè)務權(quán)限值，不需要這里可以不寫')
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）問題
按上述代碼操作后，點擊列表操作欄的復制按鈕會跳轉(zhuǎn)到新增頁面并且將當前行的數(shù)據(jù)復制到對應各個組件內(nèi)，數(shù)據(jù)呈現(xiàn)和保存正常，但是發(fā)現(xiàn)了一個問題，數(shù)據(jù)無法修改，網(wǎng)上查閱資料應該異步獲取詳情信息且數(shù)據(jù)獲取時打印輸出下返回數(shù)據(jù)是否有問題等，具體分析如下
① 異步問題
確保數(shù)據(jù)的獲取是異步完成的。如果你的數(shù)據(jù)是通過異步請求獲取的，確保在數(shù)據(jù)返回之前不要執(zhí)行任何賦值操作。你可以使用async/await或者.then()語法確保異步請求完成后再進行賦值。
② 數(shù)據(jù)是否正確
確保你查詢到的數(shù)據(jù)是正確的。你可以在控制臺打印查詢到的數(shù)據(jù)，確保它包含你所需的信息。
③ Reactivity（響應性）
Vue.js中的響應性是通過數(shù)據(jù)屬性的getter和setter來實現(xiàn)的。確保你正在使用Vue.js的響應性系統(tǒng)來更新數(shù)據(jù)。如果你是在異步操作中修改數(shù)據(jù)，確保在Vue.js的上下文中執(zhí)行這些操作。
④ 組件是否正確渲染
確保組件已正確渲染，并且你正在嘗試更改的數(shù)據(jù)在組件中可見。你可以在組件的模板中使用雙花括號 {{ variable }} 來輸出數(shù)據(jù)，以確保它們正在正確顯示。
4）解決
經(jīng)過排查，本文問題為周期和響應性問題，具體修改為調(diào)整周日created為mounted，調(diào)整數(shù)據(jù)返回的賦值方式改為響應式獲取，思路和代碼如下：
① 之前在 created 鉤子中異步調(diào)用方法，可能會導致在數(shù)據(jù)獲取之前組件渲染完成，這可能導致數(shù)據(jù)無法正確地綁定到組件。將數(shù)據(jù)獲取移動到 mounted 鉤子中，因為 mounted 鉤子在組件已經(jīng)掛載到 DOM 后觸發(fā)，這時候可以確保組件已經(jīng)渲染完成。
② Vue.js 需要對象是響應式的才能在數(shù)據(jù)更改時觸發(fā)視圖更新。確保你的 form 對象是在 data 中聲明的，并且使用了 Vue.set 或 this.$set 來確保嵌套屬性的響應性。
mounted () {
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 = ''
// 使用 Vue.set 或 this.$set 來確保響應性
this.$set(this.form, 'Name', data.RG_Name)
this.$set(this.form, 'Sign', data.RG_Sign)
this.$set(this.form, 'BG', { Id: data.BG_Id, Name: data.BG_Name })
this.$set(this.form, 'Sign', data.RG_Sign)
this.$set(this.form, 'RuleJson', JSON.parse(data.RuleJson))
this.dataList = this.form.RuleJson
}
} catch (error) {}
},
}
5）其他方便排查的原因在此做個列舉
① 確保數(shù)據(jù)綁定正確
在模板中使用雙花括號 {{ variable }} 輸出數(shù)據(jù)，確保數(shù)據(jù)正確地綁定到組件。例如，你可以在模板中添加一些輸出語句：
<template>
<div>
{{ form.Name }}
{{ form.BG }}
<!-- 其他組件的輸出語句 -->
</div>
</template>
這將幫助你確定是否有數(shù)據(jù)正確地傳遞到了組件
② 檢查數(shù)據(jù)類型和結(jié)構(gòu)
確保 GetInfo 返回的數(shù)據(jù)與你在 New.vue 中的期望一致?？梢栽?mounted 鉤子中使用 console.log(data) 來查看獲取的數(shù)據(jù)結(jié)構(gòu)。
async _getDetail () {
try {
const data = await GetInfo({
Id: this.id * 1,
})
console.log(data); // 查看數(shù)據(jù)結(jié)構(gòu)
// ... 其他代碼
} catch (error) {}
}
③ 檢查是否有報錯信息
查看瀏覽器控制臺是否有任何錯誤消息?？赡苡芯W(wǎng)絡(luò)請求問題或其他導致數(shù)據(jù)無法正確加載的問題。文章來源：http://www.zghlxwxcb.cn/news/detail-746953.html
④ 確保組件的 form 數(shù)據(jù)對象是響應式的
Vue.js 需要對象是響應式的才能在數(shù)據(jù)更改時觸發(fā)視圖更新。確保你的 form 對象是在 data 中聲明的，并且使用了 Vue.set 或 this.$set 來確保嵌套屬性的響應性。如本文解決辦法文章來源地址http://www.zghlxwxcb.cn/news/detail-746953.html
若本文有幫助到閱讀本文的同學，歡迎點贊、關(guān)注、收藏，互相學習交流。
到了這里，關(guān)于Vue + Element UI 實現(xiàn)復制當前行數(shù)據(jù)功能(復制到新增頁面組件值不能更新等問題解決)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
