使用Vue-TreeSelect组件的时候，用watch变量方式解决弹出编辑对话框界面无法触发更新的问题

在前篇随笔《
使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理
》中介绍了Vue-TreeSelect组件的使用，包括使用v-modal绑定值，normalizer 来映射属性处理，还有一个@input时间处理值变更的关联操作。

在常规的新增界面处理过程中，弹出的对话框是已经构建完成的了，所有界面元素已经渲染，因此能够正常解决级联问题的处理。但在编辑界面中，确无法保证界面渲染完成，导致无法级联更新的问题。我们这里再进一步探讨更新的问题：在使用Vue-TreeSelect组件的时候，用watch变量方式解决弹出编辑对话框界面无法触发更新的问题。

1、问题描述

公司-部门-人员级联下拉列表的处理如下所示。

在编辑界面的时候，如果也是使用@input的事件来处理，则得不到有效的级联关系处理。

如下，我们编辑框绑定和处理更新的界面代码如下所示，这里和新增对话框一样，采用@input事件处理更新的操作。

    <el-col:span="12">
      <el-form-itemlabel="所属公司"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-itemlabel="默认部门"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-itemlabel="所属经理"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')

      awaitthis.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-itemlabel="所属公司"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-itemlabel="默认部门"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 =valuethis.getlist()

    },

    showaction (value) {//属性变化触发更新
      this.showAction =valuethis.getlist()

    }

  },