SuitTreeList 虚拟滚动树

说明

树列表基于 第三方表格组件库 vxe-table (opens new window) 的vxe-list和element-ui (opens new window)的el-checkbox 进行的二次封装

使用

<template>
  <div class="app-container userDiv" style="background-color:#ffffff;">
    <SuitTreeList
      id="tree"
      :height="treeHeight"
      :data="data"
      @loadMoreData="loadMoreData"
      @clickItem="handleNodeClick"
    >
      <span
        slot-scope="{ data }"
      >
        {{ data.name }}
      </span>
    </SuitTreeList>
  </div>
</template>

<script>

export default {
  name: 'Test',
  data() {
    return {
		treeHeight: 400,
    data: [
            {
                id: 100,
                name: '测试-1标',
                leaf: false
            },
            {
                id: 110,
                name: '测试-2标',
                leaf: false
            },
            {
                id: 120,
                name: '测试-3标',
                leaf: true
            },
            {
                id: 130,
                name: '测试-4标',
                leaf: true
            }
        ]
	}
  },
  mounted() {

  },
  methods: {
	// 懒加载树
    loadMoreData(val) {
      debugger
        if (val._loaded) return // 节点已经加载过了就是不需要进行处理
        if (val.id === 100) {
            this.data.push(
                { id: 101, parentId: 100, name: `测试1-子节点-0`, leaf: true },
                { id: 102, parentId: 100, name: `测试1-子节点-1`, leaf: true },
                { id: 103, parentId: 100, name: `测试1-子节点-2`, leaf: true },
                { id: 104, parentId: 100, name: `测试1-子节点-3`, leaf: true },
            )
        }
        if (val.id === 110) {
            this.data.push(
                { id: 111, parentId: 110, name: `测试2-子节点-0`, leaf: true },
                { id: 112, parentId: 110, name: `测试2-子节点-1`, leaf: true },
                { id: 113, parentId: 110, name: `测试2-子节点-2`, leaf: true },
                { id: 114, parentId: 110, name: `测试2-子节点-3`, leaf: true }
            )
        }
        val._loaded = true
    },
	// 树形结构点击事件
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

Expand Copy Copy

参数说明

属性

属性	描述	类型	可选值	默认值
data	树列表显示的数据	Array[],Object{}	—	—
height	树列表高度	number, string	—	300
showCheckBox	是否显示复选框	boolean	—	false
expandAll	是否展开所有节点	boolean	—	false
defaultExpandedKeys	默认展开节点数据（需要传入节点唯一值）	Array[]	—	[]

data 属性

属性	描述	类型	可选值	默认值
id	数据唯一值	number	—	—
children	数据子节点	Array[]	—	—
leaf	是否为最后节点(根据这个值判断是否有子节点)	boolean	—	—
parentId	子节点关联父节点(根据这个参数处理谁为父节点)	number	—	—
name	节点显示名称	string	—	—

事件

事件名称	说明	回调参数
loadMoreData	展开关闭节点	row
clickItem	行的点击事件	row

组件源码及综合示例参考

组件源码 (opens new window)综合示例 (opens new window)