使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题
伍华聪 人气:0在前篇随笔《使用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() } },
加载全部内容