pc-component-v5/packages/tree/src/TreeViewNode.vue

<template>
  <ul
    :id="node.id"
    :class="{'root-node' : isRoot}"
  >
    <li :class="{'root-node' : isRoot}">
      <span
        class="node-text icon expand-icon glyphicon"
        :class="{'glyphicon-plus-sign' : (isNodeOpen == false), 'glyphicon-minus-sign' : (isNodeOpen == true), 'glyphicon-leaf' : (isNodeOpen == undefined)}"
        @click="nodeExpand(node)"
      />

      <span
        v-if="isShowCheck==undefined || isShowCheck"
        class="glyphicon select-node"
        :class="{'selected-node' : node.selected, 'glyphicon-check' : node.selected, 'glyphicon-unchecked' : !node.selected}"
        @click="nodeSelect(node)"
      />

      <font>{{ node.text }}</font>

      <template
        v-for="childrenNode in node.childrenDatas"
        :key="childrenNode.id"
      >
        <TreeViewNode
          v-if="node.open && node.childrenDatas != undefined && node.childrenDatas.length > 0"
          :node="childrenNode"
          :is-show-check="childrenNode.isShowCheck"
          @node-expand="nodeExpand"
          @node-select="nodeSelect"
        />
      </template>
    </li>
  </ul>
</template>

<script>

export default {
  name: 'TreeViewNode',
  components: {

  },

  props: {
    'node': {
      type: Object,
      default: null,
    },
    'isShowCheck': {
      type: Boolean,
      default: false,
    },
    'isRoot': {
      type: Boolean,
      default: false,
    },
  },

  emits: ['nodeExpand','nodeSelect'],

  data: function () {
    return {
    };
  },

  computed: {
    // 节点是否打开
    isNodeOpen: function () {
      if (this.node.childrenDatas == undefined || this.node.childrenDatas.length == 0) {
        console.log(this.node.text + '无子节点');
        return undefined;
      } else {
        console.log(this.node.text + '有子节点' + this.node.open);
        return this.node.open == true;
      }

    },
  },

  mounted: function () {

  },
  methods: {
    nodeExpand: function (node) {
      if (node === this.node) {
        // eslint-disable-next-line
                this.node.open = !this.node.open;
      }
      // 触发父组件的事件
      // if(node.open){
      this.$emit('nodeExpand', node);
      // }
    },

    nodeSelect: function (node) {
      this.$emit('nodeSelect', node);
    },

  },
};
</script>

<style scoped>
.root-node {
    margin-left: 0px;
    padding-left: 0px;
    text-align: left;
}

.node-text {
    height: 30px;
    line-height: 40px !important;
}

.node-text:hover {
    cursor: pointer;
}

ul {
    padding-left: 10px;
}

li {
    padding-left: 10px;
    list-style: none;
}

.select-node {
    cursor: pointer;
    color: #0066ff;
    font-size: large;
}

.selected-node {
    cursor: pointer;
    color: #0066ff;
    font-size: large;
}
</style>