当前位置：首页 > VUE

vue iview实现树形列表

2026-02-24 09:39:09VUE

vue iview实现树形列表的方法

在Vue项目中结合iView组件库实现树形列表，主要依赖Tree组件。以下是具体实现步骤和代码示例。

安装iView

确保项目中已安装iView库。若未安装，可通过npm或yarn添加：

npm install iview --save
# 或
yarn add iview

引入iView组件

在main.js中全局引入iView及其样式：

import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(iView);

基础树形列表实现

在Vue组件中使用Tree组件，通过data属性传递树形数据：

<template>
  <Tree :data="treeData" @on-select-change="handleSelect"></Tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: '父节点1',
          expand: true,
          children: [
            {
              title: '子节点1',
              expand: true
            },
            {
              title: '子节点2',
              expand: true
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleSelect(selectedNodes) {
      console.log('选中节点:', selectedNodes);
    }
  }
};
</script>

动态加载数据

通过load-data属性实现异步加载子节点：

<template>
  <Tree :data="treeData" :load-data="loadData"></Tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: '父节点',
          loading: false,
          children: []
        }
      ]
    };
  },
  methods: {
    loadData(item, callback) {
      item.loading = true;
      setTimeout(() => {
        const data = [
          { title: '子节点1' },
          { title: '子节点2' }
        ];
        item.loading = false;
        item.children = data;
        callback();
      }, 1000);
    }
  }
};
</script>

自定义节点内容

通过render函数自定义节点渲染：

<template>
  <Tree :data="treeData" :render="renderContent"></Tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: '自定义节点',
          expand: true
        }
      ]
    };
  },
  methods: {
    renderContent(h, { root, node, data }) {
      return h('span', {
        style: {
          color: 'blue'
        }
      }, data.title);
    }
  }
};
</script>

复选框功能

启用show-checkbox属性实现多选：

<template>
  <Tree :data="treeData" show-checkbox @on-check-change="handleCheck"></Tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: '节点1',
          expand: true,
          children: [
            { title: '子节点1' },
            { title: '子节点2' }
          ]
        }
      ]
    };
  },
  methods: {
    handleCheck(selectedNodes) {
      console.log('选中节点:', selectedNodes);
    }
  }
};
</script>

拖拽功能

通过draggable和事件实现拖拽排序：

<template>
  <Tree 
    :data="treeData" 
    draggable 
    @on-drag-start="handleDragStart"
    @on-drag-end="handleDragEnd"
  ></Tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: '可拖拽节点',
          expand: true
        }
      ]
    };
  },
  methods: {
    handleDragStart() {
      console.log('拖拽开始');
    },
    handleDragEnd() {
      console.log('拖拽结束');
    }
  }
};
</script>