封装一个带查询功能的树形省市区（el-tree）

 查询效果：点击左边省市区右边显示相应的信息

组件myy_tree.vue页面

<template>
  <div>
    <el-tree
      class="filter-tree"
      :data="items"
      ref="tree"
      :render-content="renderItem"
      :node-key="defaultProps.id"
      :props="defaultProps"
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>

<script>
export default {
  name: "myy-tree",
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      trees: [],
      defaultProps: {
        children: "items",
        id: "code",
      },
      checkList: [],
    };
  },
  created() {},
  methods: {
    handleNodeClick(e, v, i) {
      this.checkList = [];
      this.getParent(v);
      this.$emit("selectDidChange", this.checkList);

      // console.log(v)
      if (v.childNodes.length > 0 && v.expanded == false) {
        v.expanded = true;
      }

    },
    getParent(node) {
      // console.log("node", node);
      if (!node.parent) return; //无父节点
      this.checkList.unshift(node.data);
      this.getParent(node.parent);
    },
    renderItem(h, { node, data, store }) {
      if (data.attr != null && data.attr.count != null && data.attr.count > 0) {
        return (
          <div>
            {data.name}
            <span style="color:red">（{data.attr.count}）</span>
          </div>
        );
      } else {
        return <span>{data.name}</span>;
      }
    },
  },
};
</script>
<style lang="less">
.el-tree-node:focus > .el-tree-node__content {
  background-color: #409eff;
  color: #fff; //节点的字体颜色
  font-weight: bold;
}
</style>

在页面上使用:

import Myytree from "../../components/xxxx/myy_tree";

  components: {
    Myytree,
  },

<div class="box-left">
    <div style="overflow-y: scroll; height: 100%">
        <myytree v-bind:items="trees" @selectDidChange="treeSelectDidChange"></myytree>
    </div>
</div>

  trees: [],

   // 获取接口树数据
    companyssq() {
      get("/xxxxx/xxx/ssq").then((res) => {
        this.trees = res.items;
      });
    },

   //选中的时候触发
    treeSelectDidChange(res) {
           console.log(res,"选中的数据");
           var treesearch = {}; //声明一个空的对象
            if (res.length > 0) {
                treesearch["选中的第一层数据"] = res[0].name; //查询看一下后端要code还是name
            }
            if (res.length > 1) {
                treesearch["选中的第二层数据"] = res[1].name;
            }
            if (res.length > 2) {
                treesearch["选中的第三层数据"] = res[2].name;
            }
           this.treesearch = treesearch; //赋值给this.treesearch请求列表的时候把它传给后端完成查询操作
    },

 treesearch: {},

 get("/xxxxx/list", {
        pIndex: this.pIndex,
        pSize: this.pSize,
        ...this.treesearch,
      }).then(res => {});