在前篇隨筆《使用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() } },
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/278773.html
標籤：JavaScript