el-tree上级修改下级清空

el-tree上级修改下级清空

此次的el-tree同样是包裹在el-select中，因为select中visible-change事件无法被正确使用，所以需要通过函数形式实现此功能

主要代码块

HTML部分

<el-select
                  ref="select"
                  v-model="quaryform.selectVal"
                  placeholder="请选择部门"
                  size="mini"
                  clearable
                  style="width: 130px"
                  class="history_item first-select"
                >
                  <!-- // 设置一个input框用作模糊搜索选项功能 -->
                  <el-input
                    v-model="treeFilter"
                    class="input"
                    placeholder="此处键入'关键词'搜索查询"
                    prefix-icon="el-icon-search"
                    size="mini"
                    style="padding: 5px"
                    clearable
                  />
                  <el-option key="id" hidden :value="quaryform.selectVal" :label="selectName" />
                  <!-- // 设置树形控件 -->
                  <el-tree
                    ref="tree"
                    v-model="quaryform.treeSelect"
                    style="padding: 0px 10px 10px 0px"
                    :data="deptOptions"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :check-on-click-node="true"
                    node-key="id"
                    :default-expand-all="true"
                    :filter-node-method="filterNode"
                    @node-click="handleNodeClick"
                    @current-change="handleTreeSelectVisibleChange"
                  >
                    <span slot-scope="{ data }">
                      <span>{{ data.label }}</span>
                    </span>
                  </el-tree>
                </el-select>

难点

主要难点为怎么识别上一个node节点的值和下一个node节点的值是什么然后进行比较，因为在element官网中没有看到有这样的函数封装在此组件中所以自己根据函数触发的优先级写了以下函数

有关优先级问题

先执行current-change、node-expand（假如节点展开）、node-click，最后执行check-change，check-change是检查节点发生变化时调用，比节点自身变化要慢

函数优先级

1->current-change

2->node-expand

3->node-click

4->check-change

函数

根据这个编写函数

得到tree中的id

 handleNodeClick(data) {

   this.nodeId = data.id

}

handleTreeSelectVisibleChange(val) {
      if (this.nodeId !== val.id) {
        this.quaryform.productSelect = ''
        this.quaryform.equipmentSelect = ''
        this.quaryform.elementSelect = ''
        this.productID = []
        this.deviceName = []
        this.deviceInfo = []
      } else {
        this.nodeId === val.id
      }
    },

比较id和后一个点击的id是否一样，不一样则清空后面组件中的信息