data_governance/src/components/common/TreeList.vue

<template>
  <div>
    <Tree :data="treeData" @on-select-change="selectChange" ref="tree" :render="renderContent"></Tree>
  </div>
</template>
<script>
export default {
  name: "TreeList",
  props: {
    currentStaData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    defaultData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    clickAllNode: { // 是否能点击全部节点 （true可点击  false第一层节点不能点击）
      type: Boolean,
      default: true
    },
    firstCalssName: {
      type: String,
      default: 'icon-hefeiditie'
    },
    secondCalssName: {
      type: String,
      default: 'icon-sutpczhihuizhantai'
    },
    thirdCalssName: {
      type: String,
      default: 'icon-ditiezhaofang'
    },
  },
  data() {
    return {
      treeData: [],
      selectVal: '合肥火车站',
    };
  },
  watch: {
    defaultData: {
    　handler(newValue, oldValue) {
        this.treeData = newValue;
      },　
   }
  },
  mounted() {
    this.treeData = this.defaultData;
  },
  methods: {
    renderContent(h, { root, node, data }) {
      let calssName = "", color="";
      if (data.level == 1) {
        calssName = 'iconfont '+ this.firstCalssName;
        color = 'red'
      } else if (data.level == 2) {
        calssName = 'iconfont '+ this.secondCalssName;
        color = '#41aeff'
      } else {
        calssName = 'iconfont '+ this.thirdCalssName
        color = '#41aeff'
      }
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
          }
        },
        [
          h("span", [
             h("i", {
              style: {
                verticalAlign: "sub",
                display: "inline-block",
                margin: "0px 5px",
                color: color,
                fontSize:'24px'
              },
              class: calssName
            }),
            // h("img", {
            //   attrs: {
            //     src: src
            //   },
            //   style: {
            //     verticalAlign: "text-bottom",
            //     display: "inline-block",
            //     margin: "0px 5px"
            //   }
            // }),
            h(
              "span",data.title
            )
          ])
        ]
      );
    },
    // arr当前以及上级的id
    selectChange(option) {
      let newArr = []
      let arr = [], level  = null, currentNodeId = null
      if (option.length != 0) {
        if (option.length == 2) {
          var result = []; // 两组数组对象取不同属性的值
          for(var i = 0; i < option.length; i++){
              var obj = option[i];
              var num = obj.title;
              var isExist = false;
              for(var j = 0; j < this.currentStaData.length; j++){
                  var aj = this.currentStaData[j];
                  var n = aj.title;
                  if(n == num){
                      isExist = true;
                      break;
                  }
              }
              if(!isExist){
                  result.push(obj);
              }
          }
          newArr = result
        } else {
          newArr = option
        }
         this.treeData.forEach((first, firstIndex,firstArr) => {
            first.expand = false; //expand 是否展开直子节点 
            if (this.clickAllNode) {
              first.disabled = false; // disabled 是否禁止选中
            }
            // first.disabled = false; // disabled 是否禁止选中
            first.selected = false;
            if (first.title == newArr[0].title && first.id == newArr[0].id) {
                first.selected = true;
                first.disabled = true; // disabled 是否禁止选中 
                first.expand = true;
                this.selectVal = first.title;
                level = first.level
                currentNodeId = first.nodeId
            }  
            if (first.children) {
              first.children.forEach((second, secondIndex,secondArr) => {
              second.expand = false; //expand 是否展开直子节点 
              second.disabled = false; // disabled 是否禁止选中
              second.selected = false;
              if (newArr[0].level == 1) {
                secondArr[firstIndex].expand = true
              }
              if (second.title == newArr[0].title && second.id == newArr[0].id) {
                  second.selected = true;
                  second.disabled = true; // disabled 是否禁止选中 
                  second.expand = true;
                  this.selectVal = second.title;
                  currentNodeId = second.nodeId
                  first.expand = true
                  arr.push(second.nodeId)
                  level = second.level
              }
              if (second.children && second.children.length>0) {
                second.children.forEach((thrid,thridIndex,thridArr) => {
                  thrid.expand = false; //expand 是否展开直子节点 
                  thrid.disabled = false; 
                  thrid.selected = false;
                  if (thrid.title == newArr[0].title && thrid.id == newArr[0].id) {
                    thrid.selected = true;
                    thrid.disabled = true; // disabled 是否禁止选中 
                    thrid.expand = true;
                    second.expand = true
                    first.expand = true
                    this.selectVal = thrid.title;
                    currentNodeId = thrid.nodeId
                    arr.push(second.nodeId)
                    arr.push(thrid.nodeId)
                    level = thrid.level
                  }
                  if (thrid.children && thrid.children.length>0) {
                    thrid.children.forEach((forth) => {
                      forth.expand = false; //expand 是否展开直子节点 
                      forth.disabled = false; 
                      forth.selected = false;
                      // if (newArr[0].level == 1) {
                      // }
                      if (forth.title == newArr[0].title && forth.id == newArr[0].id) {
                        forth.selected = true;
                        forth.disabled = true; // disabled 是否禁止选中 
                        forth.expand = true;
                        second.expand = true
                        first.expand = true
                        thrid.expand = true;
                        this.selectVal = forth.title;
                        currentNodeId = forth.nodeId
                        arr.push(second.nodeId)
                        arr.push(thrid.nodeId)
                        arr.push(forth.nodeId)
                        level = forth.level  
                      }
                      if (forth.children && forth.children.length>0) {
                        forth.children.forEach((five) => {
                          five.expand = false; //expand 是否展开直子节点 
                          five.disabled = false; 
                          five.selected = false;
                          // if (newArr[0].level == 1) {
                          //   console.log('level4')
                          // }
                          if (five.title == newArr[0].title && five.id == newArr[0].id) {
                            five.selected = true;
                            five.disabled = true; // disabled 是否禁止选中 
                            five.expand = true;
                            second.expand = true
                            first.expand = true
                            thrid.expand = true
                            forth.expand = true
                            this.selectVal = five.title;
                            currentNodeId = five.nodeId
                            arr.push(second.nodeId)
                            arr.push(thrid.nodeId)
                            arr.push(forth.nodeId)
                            arr.push(five.nodeId)
                            level = five.level
                          }
                        })
                        }
                    })
                  }
                })
              }
            });
            }        
          });
      }
      this.$emit('treeChange',this.selectVal,arr,level,currentNodeId)
    },
  }
}

</script>
<style scoped lang="stylus">
>>> .ivu-tree-arrow {
  color: #41aeff;
  width: 15px;
}
>>> .ivu-tree-title {
  color: #fff;
  min-width: 90%;
  padding: 6px 4px;
  vertical-align: middle;
}
>>> .ivu-tree-title:hover {
    background-color: transparent;
}
>>> .ivu-tree-title-selected, >>> .ivu-tree-title-selected:hover {
  background-color: #3565BC;
  // background-color: transparent;
  color: #fff;
}
>>> .ivu-tree-title img {
  width: 18px;
  height: 18px;
}
// >>> .ivu-tree .ivu-icon {// 禁止旋转
//   -webkit-transform: rotate(0deg);
//   transform: rotate(0deg);
// }
// >>> .ivu-tree .ivu-icon-ios-arrow-forward:before { //改变tree默认折叠的三角箭头
//     background: url('../../assets/images/yu.png') no-repeat 0 3px;
//     content: '';
//     display: block;
//     width: 16px;
//     height: 16px;
//     font-size: 16px;
//     background-size: 16px;
// }
// >>> .ivu-tree .ivu-tree-arrow-open .ivu-icon-ios-arrow-forward:before { //改变tree默认展开的三角箭头
//     background: url('../../assets/images/warning.png') no-repeat 0 0px;
//     content: '';
//     display: block;
//     width: 16px;
//     height: 16px;
//     font-size: 16px;
//     background-size: 16px;
// }
</style>