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

在前篇随笔《使用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()
    }
  },

 

为了方便读者理解,我列出一下前面几篇随笔的连接,供参考:

循序渐进VUE+Element 前端应用开发(1)--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理

循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数

循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示 

循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用

循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理

循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理

循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理 

循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制  

VUE+Element 前端应用开发框架功能介绍 

循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用

循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23)--- 基于ABP实现前后端的附件上传,图片或者附件展示管理 

循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理

循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)

循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

电商商品数据库的设计和功能界面的处理 

循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理 

循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理 

循序渐进VUE+Element 前端应用开发(31)--- 系统的日志管理,包括登录日志、接口访问日志、实体变化历史日志

循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理 

循序渐进VUE+Element 前端应用开发(33)--- 邮件参数配置和模板邮件发送处理 

使用代码生成工具快速开发ABP框架项目 

使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理 

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

 

主要研究技术:代码生成工具、会员管理系统、客户关系管理软件、病人资料管理软件、Visio二次开发、酒店管理系统、仓库管理系统等共享软件开发
专注于Winform开发框架/混合式开发框架Web开发框架Bootstrap开发框架微信门户开发框架的研究及应用
  转载请注明出处:
撰写人:伍华聪  http://www.iqidi.com 
    

posted on 2021-04-21 10:57  伍华聪  阅读(663)  评论(0编辑  收藏  举报

导航