Vue + Element UI 實現複製當前行資料功能(複製到新增頁面元件值不能更新等問題解決)

GoodTimeGGB發表於2023-11-23
VueUI元件

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來實現的。確保你正在使用Vue.js的響應性系統來更新資料。如果你是在非同步操作中修改資料，確保在Vue.js的上下文中執行這些操作。

④ 元件是否正確渲染

確保元件已正確渲染，並且你正在嘗試更改的資料在元件中可見。你可以在元件的模板中使用雙花括號 {{ variable }} 來輸出資料，以確保它們正在正確顯示。

4）解決

經過排查，本文問題為週期和響應性問題，具體修改為調整週日created為mounted，調整資料返回的賦值方式改為響應式獲取，思路和程式碼如下：

① 之前在 created 鉤子中非同步呼叫方法，可能會導致在資料獲取之前元件渲染完成，這可能導致資料無法正確地繫結到元件。將資料獲取移動到 mounted 鉤子中，因為 mounted 鉤子在元件已經掛載到 DOM 後觸發，這時候可以確保元件已經渲染完成。
② Vue.js 需要物件是響應式的才能在資料更改時觸發檢視更新。確保你的 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）其他方便排查的原因在此做個列舉

① 確保資料繫結正確

在模板中使用雙花括號 {{ variable }} 輸出資料，確保資料正確地繫結到元件。例如，你可以在模板中新增一些輸出語句：

<template>
  <div>
    {{ form.Name }}
    {{ form.BG }}
    <!-- 其他元件的輸出語句 -->
  </div>
</template>

這將幫助你確定是否有資料正確地傳遞到了元件

② 檢查資料型別和結構

確保 GetInfo 返回的資料與你在 New.vue 中的期望一致。可以在 mounted 鉤子中使用 console.log(data) 來檢視獲取的資料結構。

async _getDetail () {
  try {
    const data = await GetInfo({
      Id: this.id * 1,
    })
    console.log(data); // 檢視資料結構
    // ... 其他程式碼
  } catch (error) {}
}

③ 檢查是否有報錯資訊

檢視瀏覽器控制檯是否有任何錯誤訊息。可能有網路請求問題或其他導致資料無法正確載入的問題。

④ 確保元件的 form 資料物件是響應式的

Vue.js 需要物件是響應式的才能在資料更改時觸發檢視更新。確保你的 form 物件是在 data 中宣告的，並且使用了 Vue.set 或 this.$set 來確保巢狀屬性的響應性。如本文解決辦法

若本文有幫助到閱讀本文的同學，歡迎點贊、關注、收藏，互相學習交流。

相關文章