使用Vue-TreeSelect組件的時候，用watch變數方式解決彈出編輯對話框介面無法觸發更新的問題

2021 年 4 月 21 日
筆記
循序漸進VUE+Element

在前篇隨筆《使用Vue-TreeSelect組件實現公司-部門-人員級聯下拉列表的處理》中介紹了Vue-TreeSelect組件的使用，包括使用v-modal綁定值，normalizer 來映射屬性處理，還有一個@input時間處理值變更的關聯操作。

在常規的新增介面處理過程中，彈出的對話框是已經構建完成的了，所有介面元素已經渲染，因此能夠正常解決級聯問題的處理。但在編輯介面中，確無法保證介面渲染完成，導致無法級聯更新的問題。我們這裡再進一步探討更新的問題：在使用Vue-TreeSelect組件的時候，用watch變數方式解決彈出編輯對話框介面無法觸發更新的問題。

1、問題描述

公司-部門-人員級聯下拉列表的處理如下所示。

在編輯介面的時候，如果也是使用@input的事件來處理，則得不到有效的級聯關係處理。

如下，我們編輯框綁定和處理更新的介面程式碼如下所示，這裡和新增對話框一樣，採用@input事件處理更新的操作。

    <el-col :span="12">
      <el-form-item label="所屬公司" prop="company_ID">
        <treeselect :options="myGroupCompany" v-model="editForm.company_ID" :searchable="false"
          :default-expand-level="Infinity" :open-on-click="true" :open-on-focus="true"
          @input="updateGroupCompany" placeholder="所屬公司" />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="默認部門" prop="dept_ID">
        <treeselect :options="myDeptTree" v-model="editForm.dept_ID" :searchable="false"
          :default-expand-level="Infinity" :open-on-click="true" :open-on-focus="true"
          @input="updateDeptUser" :normalizer="normalizer" placeholder="所屬部門" />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="所屬經理" prop="pid">
        <treeselect :options="myDeptUser" v-model="editForm.pid" :searchable="false"
          :default-expand-level="Infinity" :open-on-click="true" :open-on-focus="true"
          :normalizer="normalizer" placeholder="所屬經理" />
      </el-form-item>
    </el-col>

顯示編輯對話框介面的程式碼也和新增操作類似

    async showEdit (id) { // 顯示編輯對話框處理
      if (!id || typeof (id) === 'undefined') {
        this.msgWarning('請選擇編輯的記錄!');
        return;
      }

      this.resetForm('editForm')
      await this.initData()
      
      var param = { id: id }
      await user.Get(param).then(data => {
        Object.assign(this.editForm, data.result)
        this.isEdit = true // 編輯狀態
      })
      // 獲取列表數據
      this.getFunctionsByUser(id)
    },

不過打開已有記錄的時候，第一次是無法進行級聯顯示正確的內容的，後面如果變化公司，則可以看到正常級聯關係。猜測應該是在渲染順序的問題，導致無法觸發更新。

可以看到選框中的unknown字樣，表明沒有觸發級聯關係，沒有正確獲取到列表數據源。

2、用watch變數方式解決問題

既然無法通過上面的方式處理，我們來變通下，默認也是初始化所屬公司列表的數據源，但不在監聽它的@input事件，而是通過watch變數的方式，監控editForm裡面對應的屬性變化，然後在觸發更新關聯的內容。

我們取消@input事件，模板程式碼變化如下所示

                <el-col :span="12">
                  <el-form-item label="所屬公司" prop="company_ID">
                    <treeselect :options="myGroupCompany" v-model="editForm.company_ID" :searchable="false"
                      :default-expand-level="Infinity" :open-on-click="true" :open-on-focus="true"
                      placeholder="所屬公司" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="默認部門" prop="dept_ID">
                    <treeselect :options="myDeptTree" v-model="editForm.dept_ID" :searchable="false"
                      :default-expand-level="Infinity" :open-on-click="true" :open-on-focus="true"
                      :normalizer="normalizer" placeholder="所屬部門" />
                  </el-form-item>
                </el-col>

然後監聽編輯表單的兩個屬性變化，如下程式碼所示。

  watch: { // 對過濾內容進行監控，實現樹列表過濾
    'editForm.company_ID': function (val, oldval) {
      if (val) {
        this.updateGroupCompany(val)
      }
    },
    'editForm.dept_ID': function (val, oldval) {
      if (val) {
        this.updateDeptUser(val)
      }
    }
  },

這樣在編輯框中公司ID變化的時候，觸發部門列表的更新；部門ID變化的時候，觸發用戶列表的更新即可。

再來看看，第一次打開用戶資訊，可以看到正常的進行展示了。

這樣的watch監控變數的變化，還可以在同步處理很多操作，如轉換介面組件的值的時候，也可以處理

  watch: { // 對過濾內容進行監控，實現樹列表過濾
    // 鍵路徑必須加上引號
    'addForm.tags_array': function(val, oldval) {
      if (val) {
        this.addForm.tags = val.toString()
      }
    },
    'editForm.tags_array': function(val, oldval) {
      if (val) {
        this.editForm.tags = val.toString()
      }
    }
  },

又或者在自定義組件的時候，監控某些內容變化，觸發介面更新的處理。

  watch: {
    ouid (value) { // 屬性變化觸發更新
      this.ouId = value
      this.getlist()
    },
    showaction (value) { // 屬性變化觸發更新
      this.showAction = value
      this.getlist()
    }
  },

Tags: 循序漸進VUE+Element