element下拉树选择组件封装

Posted 2021-10-16 包子源

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

封装组件SelectTree.vue

<!-- 树状选择器 -->
<template>
  <el-select
    ref="mySelect"
    v-model="treeName"
    placeholder="请选择"
  >
    <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: "Pagination",
  props: {
    data: {
      type: [Array, Object]
    },
    props: {
      type: [Object]
    },
    value: {
      type: [Number, String]
    }
  },
  data() {
    return {
      treeName: ""
    };
  },
  watch: {
    value(val) {
      if (val) {
        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 = "";
      }
    }
  },
  mounted() {
    if (this.value) {
      if (this.$refs["seltree"]) {
        this.$refs["seltree"].setCurrentKey(this.value);
        this.treeName = this.$refs["seltree"].getCurrentNode(this.value)[
          this.props.label
        ];
      }
    } else {
      this.$refs["seltree"].setCurrentKey(null);
      this.treeName = "";
    }
  },
  methods: {
    treeChange(data) {
      this.$emit("treeEvent", data.id);
      this.treeName = data[this.props.label];
      this.$refs.mySelect.handleClose();
    }
  }
};
</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":"江苏省"
    }
]