效果图：
因为每个页面都用到这个单位，所以把单位列表单列出来，假装是个封装的组件，在其他页面直接用。
源码：
<template><div style="height: 48rem;overflow-y: scroll"><h4>单位列表</h4><el-inputplaceholder="输入关键字进行过滤"v-model="filterText"></el-input><!-- node-click 点击事件 --><el-treeclass="filter-tree":data="LeftData":props="defaultProps"default-expand-allhighlight-currentnode-key="ID"@node-click="handleNodeClick":filter-node-method="filterNode"ref="treeList"></el-tree></div>
</template><script>
export default {//组件名称name: "",//import引入的组件需要注入到对象中才能使用components: {},//父组件传参，子组件接收props: ["LeftTreeData"],//生命周期 - 创建完成（可以访问当前this实例）created() {},//生命周期 - 挂载完成（可以访问DOM元素）mounted() {this.getLeftData();},data() {return {//进行模糊查询的数据filterText: "",//树形结构defaultProps: {children: "Children",label: "Text",id: "ID",},// 进行传递后端的树形结构的idDataID: null,//数据：展示的数据LeftData: [],};},//方法集合methods: {//获取左侧单位数据列表getLeftData() {let that = this;//获取菜单左侧数据列表that.$API.GetTreeList().then((res) => {this.LeftData = res.data.data;//传给父组件数据this.$emit("getTreeData", this.LeftData);});},//进行切换数据（点击事件）handleNodeClick(data, checked) {if (checked) {//进行勾选的数据this.$refs.treeList.setCheckedNodes([data]);console.log(data, "data");// 进行选中接收表格数据idthis.DataID = data.ID;this.$emit("getTreeDataID", this.DataID);this.$emit("GetTreeData", data);}},//进行模糊查询filterNode(value, data) {if (!value) return true;return data.Text.indexOf(value) !== -1;},},//监听属性 类似于data概念computed: {},//监控data中的数据变化watch: {//过滤filterText(val) {this.$refs.treeList.filter(val);},},
};
</script><style scoped>
</style>在其他页面引用：
<div>//3. 使用<ComUnitSetTreeData @GetTreeData="handleNodeClick" />
</div><script>
//1. 引入
import ComUnitSetTreeData from "@/components/zaojia/ComUnitSetTreeData/index.vue";
export default {//2. 注册components: {ComUnitSetTreeData,},methods:{//当点击数据时，调这个方法: (获取点击左侧树的数据)handleNodeClick(data) {this.selectedDictIDs = data.Value; //ID 左侧树的唯一值this.selectLabel = data.Text; //单位名称console.log("点击树的时候===", data);this.init(this.selectedDictIDs); //调自己的方法（这边是初始化数据）},}
}
</script>
