Iview组件库之tree的第二种实现

最新推荐文章于 2024-07-04 18:58:52 发布

weixin_33788244

最新推荐文章于 2024-07-04 18:58:52 发布

阅读量888

点赞数

原文链接：https://juejin.im/post/5c9f633a51882567af42e31c

版权

这篇博客介绍了如何在Iview组件库中利用on-select-change事件实现Tree组件的功能，包括创建树节点和模态框操作。通过组件库，可以方便地添加、修改和删除树节点，并提供了github链接和博客详细内容链接以供进一步阅读。

摘要由CSDN通过智能技术生成

Iview组件库之tree

让我们看一下实现的效果

通过Iview组件库中的tree的on-select-change事件实现。点击树节点时触发，可以返回当前已选中的节点数组、当前项

我们需要写两个组件

树组件

三个按钮，一个用来添加，一个用来修改，一个用来删除

<template>
  <Card ref="cardTable">
      <Button type="info" size="small"  icon="md-add" @click="handleAdd(currentNode,currentRoot)">添加</Button>
      <Button type="primary" size="small" icon="md-create" @click="handleEdit(currentNode,currentRoot)">修改</Button>
      <Button type="error" size="small" icon="md-close" @click="handleDelete(currentNode,currentRoot)">删除</Button>
      <tree :data="treeData"  @on-select-change="handleSelectChange" ref="tree">
      </tree>
      <ColumnFormModal
      :currentColumnParent="currentColumnParent"
      :currentNodeKey="currentNodeKey"
      :showModal="showModal"
      :treeObj="treeObj"
      @modal-visible-change="modalVisibleChange"
      ></ColumnFormModal>
  </Card>
</template>

<script>
import ColumnFormModal from './ColumnFormModal'
export default {
  name: 'Column',
  components: {
    ColumnFormModal
  },
  data () {
    return {
      // 用来给tree的data属性赋值
      treeData: [],
      // 用来接收后台传来的树List
      treeList: null,
      // 编辑模态框
      showModal: false,
      // 选中的当前node
      currentNode: {},
      // 选中的树的根节点
      currentRoot: {},
      // 树对象
      treeObj: {},
      // 当前选中节点的nodeK