[Jeecg]使用antdVue实现自定义下拉框式部门选择组件

最近使用了Jeecg自带的antdVue弹出式部门选择组件，相对于整个页面来说，感觉弹出式不太协调，于是动手编写了下拉框式部门选择组件。

下面给小伙伴儿们演示一下具体编写过程。

采用Select选择器

要实现下拉框，肯定是用到select选择器。我看到select有个dropdownRender的方法，允许用户自定义下拉框的内容，这就好办。

开始

1、先写上select组件的基本语法

<a-select 
:value="nodeValue" 
style="width: 100%" 
:placeholder="placeholder" 
@blur="handleInput">
</a-select>

接下来就要用到slot插槽了。

2、将jeecg原本的树组件直接拿来放到插槽中，将插槽的名字改为dropdownRender，并设计好样式。这里要增加最大的高度，否则下拉框将无法收敛。

<div slot="dropdownRender" slot-scope="menu" style="max-height: 350px;overflow-y: scroll;">
   <a-tree
     ref="selectTree"
     :defaultExpandAll="true"
     style="max-height: 350px;"
     @select="onSelect"
     :multiple="false"
     :checkStrictly="false"
     :checkable="false"
     :treeData="departTree" />
</div>

3、下拉框必须有一个select-option组件，我们写一个上去，但要设为隐藏:v-show=“false”

<a-select-option v-show="false" :value="nodeValue">{{ nodeText }}</a-select-option>

OK，dom已经写完。

4、html的整体结构

<template>
  <a-select :value="nodeValue" style="width: 100%" :placeholder="placeholder"  @blur="handleInput">
    <a-select-option v-show="false" :value="nodeValue">{{ nodeText }}</a-select-option>
    <div slot="dropdownRender" slot-scope="menu" style="max-height: 350px;overflow-y: scroll;">
      <a-tree
        ref="selectTree"
        :defaultExpandAll="true"
        style="max-height: 350px;"
        @select="onSelect"
        :multiple="false"
        :checkStrictly="false"
        :checkable="false"
        :treeData="departTree" />
    </div>
  </a-select>
</template>

5、加载远程数据

1)加载树组件数据。就用原生的：

queryDepartTree(){
   queryIdTree().then((res)=>{
     if(res.success){
       this.departTree = res.result;
     }
   })
},

有了数据以后，现在就有了效果。下一步写响应事件。

6、事件处理

当选中树的某个节点时，我们要将节点信息的返回值赋给select-option中，同时也赋给select组件的value值中。（这是用的form表单的v-decorator绑定方法。如用v-model的话，要启用select组件的v-model属性）

//在树中加上@select="onSelect"的代码，选中之后干什么....
onSelect(selectedKeys, info){
  this.nodeText = info.selectedNodes[0].data.props.title;
  this.nodeValue = info.selectedNodes[0].data.props.data.orgCode;
  this.selectNode = info.selectedNodes[0];
},

还要将事件转移，调用父组件的方法。在select组件中加入@blur事件

//在select中加上@blur="handleInput"的代码。选中后失去焦点时干什么....
handleInput(val) {
  if(this.triggerChange){
    this.$emit('change', val);
  }else{
    this.$emit('input', val);
  }
  this.$emit('ok', this.selectNode);
},

form表单的v-decorator绑定需要子组件调用change事件。

至此，选择功能基本已经完成，但是如果需要修改表单，目前无法在select上显示指定的值。需要增加watch函数。

watch: {
    value(){
      if(this.value !== null && this.value !== undefined){
        if(this.departTree.length > 0){
          this.nodeText = this.queryTreeData(this.value);
          this.nodeValue = this.value.toString();
        }
      }else{
        this.nodeValue = undefined;
      }
    },
    departTree(){
      if(this.value !== null && this.value !== undefined){
        if(this.departTree.length > 0){
          this.nodeText = this.queryTreeData(this.value);
          this.nodeValue = this.value.toString();
        }
      }else{
        this.nodeValue = undefined;
      }
    }
  },

这里监视了两个变量主要是因为监视value时，tree组件还未加载，会导致无法赋值。

7、父页面引用

<z-select-depart style="width:100%;" v-decorator="[ 'orgCode' , validatorRules.orgCode]" :trigger-change="true" placeholder="请选择部门" @ok="selectDepartOK"/>

结束

自定义组件就完成了，感兴趣的小伙伴儿们可以试试。也可以直接下载源码立即在项目中使用哦。

源码下载：链接