element下拉树选择组件封装

Posted 2021-12-30 包子源

使用el-select和el-tree组件，实现下拉树选择组件封装，先看一下效果吧：

封装组件SelectTree.vue

<!-- 树状选择器 -->
<template>
  <el-select
    ref="mySelect"
    v-model="treeName"
    placeholder="请选择"
    :disabled="isDisabled"
    @visible-change="vChange"
  >
    <el-option :value="treeName" style="height: auto">
      <el-tree
        :expand-on-click-node="false"
        :data="data"
        default-expand-all
        node-key="id"
        ref="seltree"
        highlight-current
        :props="props"
        @node-click="treeChange"
      ></el-tree>
    </el-option>
  </el-select>
</template>

<script>
export default 
  name: "SelectTree",
  props: 
    data: 
      type: [Array, Object],
    ,
    props: 
      type: [Object],
    ,
    value: 
      type: [Number, String],
    ,
    isDisabled: 
      type: [Boolean],
    ,
  ,
  data() 
    return 
      treeName: "",
    ;
  ,
  watch: 
    value: 
      handler(val) 
        if (val != null) 
          this.$nextTick(() => 
            if (this.$refs["seltree"]) 
              this.$refs["seltree"].setCurrentKey(val);
              this.treeName =
                this.$refs["seltree"].getCurrentNode(val)[this.props.label];
            
          );
         else 
          this.$refs["seltree"].setCurrentKey(null);
          this.treeName = "";
        
      ,
      deep: true,
      immediate: true,
    ,
  ,
  methods: 
    treeChange(data) 
      this.$emit("treeEvent", data.id);
      this.treeName = data[this.props.label];
      this.$refs.mySelect.handleClose();
    ,
    vChange() 
      setTimeout(() => 
        $(".el-select-dropdown__wrap").scrollTop(0);
      , 100);
    ,
  ,
;
</script>

使用方法：

<select-tree
  :value="form.area"
  :data="treeData"
  :props="treeProps"
  @treeEvent="treeEvent"
></select-tree>

data() 
  return 
	treeProps: 
	  children: "children",
	  label: "regionName"
	,
	treeData: [],
	form: 
	  area: ""
	,
  
,
methods: 
  treeEvent(val) 
    this.form.area = val;
  

数据格式：

[
    
        "orderNo":"1",
        "id":320000,
        "parentId":0,
        "children":[
            
                "orderNo":"1.1",
                "id":320100,
                "parentId":320000,
                "children":[
                    
                        "orderNo":"1.1.1",
                        "id":320102,
                        "parentId":320100,
                        "children":null,
                        "regionName":"玄武区"
                    ,
                    
                        "orderNo":"1.1.11",
                        "id":320118,
                        "parentId":320100,
                        "children":null,
                        "regionName":"高淳区"
                    
                ],
                "regionName":"南京市"
            ,
            
                "orderNo":"1.2",
                "id":320900,
                "parentId":320000,
                "children":[
                    
                        "orderNo":"1.2.1",
                        "id":320902,
                        "parentId":320900,
                        "children":null,
                        "regionName":"亭湖区"
                    ,
                    
                        "orderNo":"1.2.9",
                        "id":320981,
                        "parentId":320900,
                        "children":null,
                        "regionName":"东台市"
                    
                ],
                "regionName":"盐城市"
            
        ],
        "regionName":"江苏省"
    
]