1、需求

使用Vue + Element UI 實(shí)現(xiàn)在列表的操作欄新增一個(gè)復(fù)制按鈕，復(fù)制當(dāng)前行的數(shù)據(jù)可以打開新增彈窗后亦可以跳轉(zhuǎn)到新增頁(yè)面，本文實(shí)現(xiàn)為跳轉(zhuǎn)到新增頁(yè)面。

2、實(shí)現(xiàn)

1）列表頁(yè) index.vue

<el-table>
<!-- 其他列 -->
<el-table-column label="操作" width="150">
   <template slot-scope="scope">
      <el-button icon="el-icon-copy-document" title="復(fù)制"  @click="toCopyNew(scope.row)"></el-button>
    </template>
  </el-table-column>
</el-table>

方法部分：用id來(lái)區(qū)分，正常新增id為0，復(fù)制id不為0

methods: {
	// 復(fù)制
	toCopyNew (item) {
	  const { url } = this.$getKey('這是是業(yè)務(wù)權(quán)限值，不需要這里可以不寫')
	  this.$router.push(`/${url}-New/${item.Id}`)
	},
}

2）新增頁(yè) New.vue

data () {
    return {
      id: this.$route.params.id,
      dataList: [],
      form: {
        Name: '',
        BG: '',
        InfoJson: [],
      },
      rules: {
        Name: [
          { required: true, message: '請(qǐng)輸入名稱', trigger: 'blur' },
        ],
        BG: [
          { required: true, message: '請(qǐng)選擇所屬組織', trigger: 'change' },
        ],
        InfoJson: [
          { required: true, message: '請(qǐng)選擇集合', 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）問(wèn)題

按上述代碼操作后，點(diǎn)擊列表操作欄的復(fù)制按鈕會(huì)跳轉(zhuǎn)到新增頁(yè)面并且將當(dāng)前行的數(shù)據(jù)復(fù)制到對(duì)應(yīng)各個(gè)組件內(nèi)，數(shù)據(jù)呈現(xiàn)和保存正常，但是發(fā)現(xiàn)了一個(gè)問(wèn)題，數(shù)據(jù)無(wú)法修改，網(wǎng)上查閱資料應(yīng)該異步獲取詳情信息且數(shù)據(jù)獲取時(shí)打印輸出下返回?cái)?shù)據(jù)是否有問(wèn)題等，具體分析如下

① 異步問(wèn)題

確保數(shù)據(jù)的獲取是異步完成的。如果你的數(shù)據(jù)是通過(guò)異步請(qǐng)求獲取的，確保在數(shù)據(jù)返回之前不要執(zhí)行任何賦值操作。你可以使用async/await或者.then()語(yǔ)法確保異步請(qǐng)求完成后再進(jìn)行賦值。

② 數(shù)據(jù)是否正確

確保你查詢到的數(shù)據(jù)是正確的。你可以在控制臺(tái)打印查詢到的數(shù)據(jù)，確保它包含你所需的信息。

③ Reactivity（響應(yīng)性）

Vue.js中的響應(yīng)性是通過(guò)數(shù)據(jù)屬性的getter和setter來(lái)實(shí)現(xiàn)的。確保你正在使用Vue.js的響應(yīng)性系統(tǒng)來(lái)更新數(shù)據(jù)。如果你是在異步操作中修改數(shù)據(jù)，確保在Vue.js的上下文中執(zhí)行這些操作。

④ 組件是否正確渲染

確保組件已正確渲染，并且你正在嘗試更改的數(shù)據(jù)在組件中可見(jiàn)。你可以在組件的模板中使用雙花括號(hào) {{ variable }} 來(lái)輸出數(shù)據(jù)，以確保它們正在正確顯示。

4）解決

經(jīng)過(guò)排查，本文問(wèn)題為周期和響應(yīng)性問(wèn)題，具體修改為調(diào)整周日created為mounted，調(diào)整數(shù)據(jù)返回的賦值方式改為響應(yīng)式獲取，思路和代碼如下：

① 之前在 created 鉤子中異步調(diào)用方法，可能會(huì)導(dǎo)致在數(shù)據(jù)獲取之前組件渲染完成，這可能導(dǎo)致數(shù)據(jù)無(wú)法正確地綁定到組件。將數(shù)據(jù)獲取移動(dòng)到 mounted 鉤子中，因?yàn)?mounted 鉤子在組件已經(jīng)掛載到 DOM 后觸發(fā)，這時(shí)候可以確保組件已經(jīng)渲染完成。

② Vue.js 需要對(duì)象是響應(yīng)式的才能在數(shù)據(jù)更改時(shí)觸發(fā)視圖更新。確保你的 form 對(duì)象是在 data 中聲明的，并且使用了 Vue.set 或 this.$set 來(lái)確保嵌套屬性的響應(yīng)性。

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 來(lái)確保響應(yīng)性
          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）其他方便排查的原因在此做個(gè)列舉

① 確保數(shù)據(jù)綁定正確

在模板中使用雙花括號(hào) {{ variable }} 輸出數(shù)據(jù)，確保數(shù)據(jù)正確地綁定到組件。例如，你可以在模板中添加一些輸出語(yǔ)句：

<template>
  <div>
    {{ form.Name }}
    {{ form.BG }}
    <!-- 其他組件的輸出語(yǔ)句 -->
  </div>
</template>

這將幫助你確定是否有數(shù)據(jù)正確地傳遞到了組件

② 檢查數(shù)據(jù)類型和結(jié)構(gòu)

確保 GetInfo 返回的數(shù)據(jù)與你在 New.vue 中的期望一致。可以在 mounted 鉤子中使用 console.log(data) 來(lái)查看獲取的數(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) {}
}

③ 檢查是否有報(bào)錯(cuò)信息

查看瀏覽器控制臺(tái)是否有任何錯(cuò)誤消息。可能有網(wǎng)絡(luò)請(qǐng)求問(wèn)題或其他導(dǎo)致數(shù)據(jù)無(wú)法正確加載的問(wèn)題。

④ 確保組件的 form 數(shù)據(jù)對(duì)象是響應(yīng)式的

Vue.js 需要對(duì)象是響應(yīng)式的才能在數(shù)據(jù)更改時(shí)觸發(fā)視圖更新。確保你的 form 對(duì)象是在 data 中聲明的，并且使用了 Vue.set 或 this.$set 來(lái)確保嵌套屬性的響應(yīng)性。如本文解決辦法

若本文有幫助到閱讀本文的同學(xué)，歡迎點(diǎn)贊、關(guān)注、收藏，互相學(xué)習(xí)交流。

總結(jié)

以上是生活随笔為你收集整理的Vue + Element UI 实现复制当前行数据功能(复制到新增页面组件值不能更新等问题解决)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。