peisweb/src/components/menuPage/MenuPageTree.vue

<template>
  <div>
    <div style="margin:2px 2px 2px 2px;">
      <el-input  placeholder="输入关键字进行过滤" v-model="filterText" size="small" />
    </div>
    <div :style="'overflow: scroll;height:' +(window.pageHeight < 600 ? 410 : window.pageHeight - 190) + 'px;'">
      <el-tree :data="dataTransOpts.tableM.menu_info" :props="customerOrg.treeprops" 
        node-key="id" :filter-node-method="filterNode"
        :default-expanded-keys="customerOrg.defaultExpandedKeys" 
        @node-click="treeclick" highlight-current ref="customerOrgTree"/>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { tcdate } from "../../utlis/proFunc";


export default {
  components: {},
  data() {
    return {
      filterText:''
    };
  },
  //<el-tree :data="$store.state.customerOrg.customerOrgTree" :props="$store.state.customerOrg.treeprops" @node-click="treeclick"></el-tree>
  computed: {
    ...mapState(["window", "dataTransOpts", "customerOrg" ]),
  },

  //创建组件后
  created() {    
  },

  //挂载组件完成
  mounted() {
    //获取体检单位列表树信息
    this.getMenuInfoTree();
  },

  methods: {
    ...mapMutations(["setData"]),

    //获取体检单位列表树信息
    getMenuInfoTree() {  
      getapi("/api/app/menuinfo/getmenuinfotreelist").then((res) => {
        if(res.code != -1){
          this.dataTransOpts.tableM.menu_info = res.data
          tcdate(this.dataTransOpts.tableM.menu_info);
        }
      });
    },

    //点击树节点
    treeclick(data) {
      this.dataTransOpts.tableS.menu_info.id = data.id;
      setTimeout(() => {
        this.dataTransOpts.refresh.menu_info.S++
      }, 20);      
    },

    //树过滤
    filterNode(value, data) {
      //console.log(value,data)
      if (!value) return true;
      return data['displayName'].indexOf(value) !== -1 || data['simpleCode'].indexOf(value.toUpperCase()) !== -1;
    }
  },

  watch: {
    "customerOrg.treeCurrentNodekey"(newVal,oldVal){
      //console.log('watch:customerOrg.treeCurrentNodekey',newVal,oldVal)
      if(newVal && newVal != oldVal){
        this.$nextTick(() => {
          this.$refs['customerOrgTree'].setCurrentKey(newVal);
        })
      }
    }, 

    "filterText"(newVal,oldVal){ //过滤菜单
      this.$refs['customerOrgTree'].filter(newVal);
    }
  },
 
};
</script>
<style scoped>
@import "../../assets/css/global.css";
@import "../../assets/css/global_tree.css";
</style>