使用Vue-TreeSelect组件的时候，用watch变量方式解决弹出编辑对话框界面无法触发更新...
source link: https://www.cnblogs.com/wuhuacong/p/14684341.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
在前篇随笔《使用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()
}
},
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK