树状结构显示

飞流银河

已于 2023-04-17 17:29:38 修改

阅读量155

点赞数

分类专栏：前端文章标签： vue.js elementui javascript

于 2023-04-17 17:24:04 首次发布

本文链接：https://blog.csdn.net/weixin_40444253/article/details/130204801

版权

前端专栏收录该内容

54 篇文章 0 订阅

订阅专栏

文章详细介绍了如何在ElementUI框架中使用el-tree组件创建树状目录，包括节点点击事件处理和懒加载数据。同时展示了el-table结合树形结构的数据展示，以及treeselect组件在选择类目时的用法，包括禁用父节点选择的功能实现。

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

方法一、element ui官网的el-tree，树状目录。

<el-tree
          :data="catalogueList"
          :load="getCatalogueDatas"
          :props="defaultProps"
          :expand-on-click-node="false"
          lazy
          @node-click="handleNodeClick"
        />


属性
catalogueList: [],//对象里要包含subCount、hasChildren、leaf、sort、label等属性
defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },

方法：
// 切换目录
    handleNodeClick(data) {
      if (data.parentId === 0) {
        this.query.catalogueId = null
      } else {
        this.query.catalogueId = data.id
      }
      this.crud.toQuery()
    },
    // 获取左侧目录数据
    getCatalogueDatas(node, resolve) {
      const sort = 'sort,asc'
      const params = { sort: sort }
      if (typeof node !== 'object') {
        if (node) {
          params['name'] = node
        }
      }
      if (node.data && node.data.id) {
        params['parentId'] = node.data.id
      } else {
        if (!params['name']) {
          params['parentId'] = 0
        }
      }
      setTimeout(() => {
        crudCatalogue.getCatalogues(params).then(res => {
          if (resolve) {
            resolve(res.content)
          } else {
            this.catalogueList = res.content
          }
        })
      }, 100)
    }

二、el-tree的table树状列表及保存修改

<el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%;"
        row-key="id"
        lazy
        :load="getDetailDatas"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @select="crud.selectChange"
        @select-all="crud.selectAllChange"
        @selection-change="crud.selectionChangeHandler"
      >


<treeselect
              v-model="form.parentId"
              :load-options="loadCatalogues"
              :options="catalogueList"
              style="width: 370px;"
              placeholder="选择上级类目"
            />




getDetailDatas(tree, treeNode, resolve) {
      const params = { parentId: tree.id, sort: 'sort,asc' }
      setTimeout(() => {
        crudCatalogue.getCatalogues(params).then(res => {
          resolve(res.content)
        })
      }, 100)
    },
    loadCatalogues({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        crudCatalogue.getCatalogues({ parentId: parentNode.id, sort: 'sort,asc' }).then(res => {
          parentNode.children = res.content.map(function(obj) {
            if (obj.hasChildren) {
              obj.children = null
            }
            return obj
          })
          setTimeout(() => {
            callback()
          }, 100)
        })
      }
    },

getSupCatalogues(id) {
      crudCatalogue.getCatalogueSuperior(id).then(res => {
        const date = res.content
        this.buildCatalogues(date)
        this.catalogueList = date
      })
    },
    buildCatalogues(catalogueList) {
      catalogueList.forEach(data => {
        if (data.children) {
          this.buildCatalogues(data.children)
        }
        if (data.hasChildren && !data.children) {
          data.children = null
        }
      })
    },
    getCatalogueList() {
      crudCatalogue.getCatalogues({ parentId: 0, sort: 'sort,asc' }).then(res => {
        this.catalogueList = res.content.map(function(obj) {
          if (obj.hasChildren) {
            obj.children = null
          }
          return obj
        })
      })
    },

三、treeselect禁用父结点选择：添加属性isDisabled:true即可。由于后台不支持is属性，因此自定义getIsDisabled()方法，不使用@Data

 <treeselect
                  v-model="form.catalogueId"
                  :load-options="loadCatalogues"
                  :options="catalogueList"
                  style="width: 370px;"
                  placeholder="选择类目"
                  :flat="true"
                />

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'


components: {Treeselect},

getCatalogueList() {
      crudCatalogue.getCatalogues({ parentId: 0, sort: 'sort,asc' }).then(res => {
        this.catalogueList = res.content.map(function(obj) {
          if (obj.hasChildren) {
            obj.children = null
          }
          return obj
        })
      })
    },
    loadCatalogues({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        crudCatalogue.getCatalogues({ parentId: parentNode.id, sort: 'sort,asc' }).then(res => {
          parentNode.children = res.content.map(function(obj) {
            if (obj.hasChildren) {
              obj.children = null
            }
            return obj
          })
          setTimeout(() => {
            callback()
          }, 100)
        })
      }
    },