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: false
    },
    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
            )
          ])
        ]
      );
    },
    selectChange(option) {
      let newArr = []
      let arr = [], level  = 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
        }
        if (this.clickAllNode) {
          this.treeData.forEach((items, index,itemsArr) => {
            items.expand = false; //expand 是否展开直子节点 
            items.disabled = false; // disabled 是否禁止选中
            items.selected = false;
            if (items.title == newArr[0].title && items.id == newArr[0].id) {
                items.selected = true;
                items.disabled = true; // disabled 是否禁止选中 
                items.expand = true;
                this.selectVal = items.title;
                level = items.level
            }  
            if (items.children) {
              items.children.forEach((val, i,valArr) => {
              val.expand = false; //expand 是否展开直子节点 
              val.disabled = false; // disabled 是否禁止选中
              val.selected = false;
              if (val.title == newArr[0].title && val.id == newArr[0].id) {
                  val.selected = true;
                  val.disabled = true; // disabled 是否禁止选中 
                  val.expand = true;
                  this.selectVal = val.title;
                  items.expand = true
                  arr.push(val.id)
                  level = val.level
              }
              if (val.children && val.children.length>0) {
                val.children.forEach((selectItem, j) => {
                  selectItem.expand = false; //expand 是否展开直子节点 
                  selectItem.disabled = false; 
                  selectItem.selected = false;
                  if (newArr[0].title =='合肥轨道交通') {
                    valArr[index].expand = true
                  }
                  if (selectItem.title == newArr[0].title && selectItem.id == newArr[0].id) {
                    selectItem.selected = true;
                    selectItem.disabled = true; // disabled 是否禁止选中 
                    selectItem.expand = true;
                    val.expand = true
                    items.expand = true
                    this.selectVal = selectItem.title;
                    arr.push(val.id)
                    arr.push(selectItem.nodeId)
                    level = selectItem.level
                  }
                })
              }
            });   
            }        
          });
        } else {
           this.treeData.forEach((items, index) => {
              items.expand = false; //expand 是否展开直子节点 
              items.children.forEach((val, i) => {
                val.selected = false; // selected 是否选中子节点
                val.disabled = false;
                if (val.title == newArr[0].title && val.id == newArr[0].id) {
                  val.selected = true;
                  val.disabled = true; // disabled 是否禁止选中 
                  items.expand = true;
                  this.selectVal = val.title;
                }
              });
          });
        }
      }
      this.$emit('treeChange',this.selectVal,arr,level)
    },
  }
}

</script>
<style scoped lang="stylus">
>>> .ivu-tree-arrow {
  color: #41aeff;
  // height: 30px;
  // line-height: 30px;
  width: 15px;
}
>>> .ivu-tree-children li {
  // width: 100%;
}
>>> .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>