vue-mptt-tree

vue-virtual-tree

项目说明

基于Vue 2.x 的虚拟树组件

主要算法

1. MPTT 预排序树算法
2. 虚拟滚动

已完成部分

1. MPTT算法部分
2. 虚拟滚动
3. 树展开/收缩动画

其他说明

当前还是测试版本，接口/方法等暂未稳定 本插件经测试后可以最多操作80万条数据，超过80万条数据则页面性能呈断崖式下降。

安装

yarn add vue-virtual-layer
或
npm install vue-virtual-layer

引用

import Vue from 'vue'
import VueVirtualLayer from 'vue-virtual-layer'

Vue.use(VueVirtualLayer)

参数

参数	说明	默认值	可用值
v-model	结果集
tree	平板化的树数据
rootId	根ID值,[String,Number]	"0"
type	树类型[String]	'select'	'select','radio','checkbox'
width	宽度[String]	200px
height	高度[String]	400px
idKey	主键名称	'id'
pidKey	父id键名	'pid'
titleKey	标题键名	'title'
itemSize	每个项的高度[Number]	26
checkboxConfig	当为checkbox模式时，checkbox返回值规则[String]	'p'	'p':父节点模式，当全选时，只返回父节点数据 'c':子节点模式，只返回子节点数据 'pc'：同时返回父子节点数据
radioConfig	当为radio模式时，radio的可选规则[Function]	(item)=>true	提供一个回调函数，传入值为当前项的值，用于判断当前项是否有radio按钮
resultType	返回值配置	id	'id':只返回id 'custom':自定义返回
customResult	回调函数，用于返回自定义结果	(item)=>item	提供一个回调函数，传入值为当前项的值,用于判断当前选择的数据需不需要作为实际结果返回

方法

方法	说明
getAllNode()	获取所有节点
getChecked()	获取所有选中节点
checkAll(check)	选中所有，传入true或false

使用示例

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div>数量：{{ addSize }}，加载时间:{{ addTime }}毫秒</div>
    <div><input v-model="searchValue" type="text" /></div>
    <!--    <div>选择：{{ data }}</div>-->
    <div style="display: flex; justify-content: center">
      <VueVirtualTree
          ref="vtree"
          v-model="data"
          :tree="tree"
          :root-id="pid"
          type="checkbox"
          titleKey="name"
          :search-key="searchValue"
          :radio-config="radioConfig"
          result-type="id"
          checkbox-config="p"
          @onLoad="onLoad"
      />
    </div>
  </div>
</template>

<script>
import VueVirtualTree from 'vue-mptt-tree'
import 'vue-mptt-tree/dist/vue-mptt-tree.css'
import { nanoid } from 'nanoid'

export default {
  name: 'App',
  components: {
    VueVirtualTree,
  },
  data() {
    return {
      tree: [],
      pid: '',
      addTime: 0,
      addSize: 0,
      searchValue: '',
      data: '',
      startTime: null,
    }
  },
  mounted() {
    let testData = []
    const rootId = nanoid()
    this.pid = rootId
    for (let i = 0; i < 100; i++) {
      const id1 = nanoid()
      let level1 = {
        id: id1,
        pid: rootId,
        name: id1,
        canCheck: true,
      }
      testData.push(level1)

      for (let j = 0; j < 100; j++) {
        const id2 = nanoid()
        let level2 = {
          id: id2,
          pid: id1,
          name: id2,
          canCheck: false,
        }
        testData.push(level2)

        for (let z = 0; z < 80; z++) {
          const id3 = nanoid()
          let level3 = {
            id: id3,
            pid: id2,
            name: id3,
            canCheck: true,
          }
          testData.push(level3)
        }
      }
    }
    this.addSize = testData.length
    this.$nextTick(() => {
      this.startTime = new Date().getTime()
      this.tree = testData
    })
  },
  methods: {
    onLoad() {
      let endTime = new Date().getTime()
      console.log(this.$refs.vtree.getAllNode())
      // const item = this.$refs.vtree.getAllNode()[10]
      this.data = this.$refs.vtree.getAllNode()[0].id
      let startTime = new Date().getTime()
      // this.$refs.vtree.check(item.data.id, true)

      console.log(this.$refs.vtree.getAllNode())
      console.log(endTime - startTime)
      this.addTime = endTime - this.startTime
      console.log(this.$refs.vtree.getChecked())
    },
    radioConfig(item) {
      return item.canCheck
    },
  },
}
</script>