vue实现版本树

Vue实现版本树的方法

使用递归组件实现树形结构

递归组件是Vue中实现树形结构的常见方式。通过组件自身调用自身，可以构建出无限层级的树形结构。

<template>
  <div>
    <tree-node :node="treeData"></tree-node>
  </div>
</template>

<script>
export default {
  components: {
    TreeNode: {
      name: 'TreeNode',
      props: ['node'],
      template: `
        <div>
          <div>{{ node.name }}</div>
          <div v-if="node.children" style="margin-left: 20px">
            <tree-node v-for="child in node.children" :key="child.id" :node="child"></tree-node>
          </div>
        </div>
      `
    }
  },
  data() {
    return {
      treeData: {
        id: 1,
        name: '版本1.0',
        children: [
          {
            id: 2,
            name: '版本1.1',
            children: [
              {id: 3, name: '版本1.1.1'},
              {id: 4, name: '版本1.1.2'}
            ]
          },
          {id: 5, name: '版本1.2'}
        ]
      }
    }
  }
}
</script>

使用第三方UI库

Element UI和Ant Design Vue等流行UI库提供了现成的树形组件，可以快速实现版本树功能。

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        label: '版本1.0',
        children: [{
          label: '版本1.1',
          children: [
            {label: '版本1.1.1'},
            {label: '版本1.1.2'}
          ]
        }, {
          label: '版本1.2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

实现版本对比功能

版本树通常需要支持版本间的对比功能，可以通过选中多个节点来实现。

<template>
  <div>
    <el-tree
      ref="tree"
      :data="treeData"
      show-checkbox
      node-key="id"
      @check-change="handleCheckChange">
    </el-tree>
    <el-button @click="compareVersions">对比版本</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [/* 树数据 */],
      selectedVersions: []
    }
  },
  methods: {
    handleCheckChange(node, checked) {
      if(checked) {
        this.selectedVersions.push(node.id)
      } else {
        const index = this.selectedVersions.indexOf(node.id)
        if(index > -1) {
          this.selectedVersions.splice(index, 1)
        }
      }
    },
    compareVersions() {
      if(this.selectedVersions.length !== 2) {
        alert('请选择两个版本进行对比')
        return
      }
      // 执行版本对比逻辑
    }
  }
}
</script>

添加版本操作功能

版本树通常需要支持添加、删除和修改版本等操作。

<template>
  <div>
    <el-tree
      :data="treeData"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            size="mini"
            @click="() => append(data)">
            添加子版本
          </el-button>
          <el-button
            size="mini"
            @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [/* 初始数据 */],
      id: 100
    }
  },
  methods: {
    append(data) {
      const newChild = { id: this.id++, label: '新版本', children: [] }
      if(!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
    },
    remove(node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    }
  }
}
</script>

实现版本树的可视化展示

使用D3.js或ECharts等可视化库可以实现更丰富的版本树展示效果。

<template>
  <div ref="treeChart" style="width: 100%; height: 600px;"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    this.initTreeChart()
  },
  methods: {
    initTreeChart() {
      const chart = echarts.init(this.$refs.treeChart)
      const option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            data: [this.treeData],
            symbolSize: 10,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 14
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>

以上方法提供了从基础到高级的Vue版本树实现方案，可以根据项目需求选择合适的实现方式。递归组件适合简单的树形结构，UI库组件提供了丰富的功能和样式，而可视化库则能实现更专业的展示效果。