vue自定义tree树组件

最新推荐文章于 2024-08-08 08:28:38 发布

不怎么样的程序员

最新推荐文章于 2024-08-08 08:28:38 发布

阅读量3.1k

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_49440146/article/details/124118824

版权

本文介绍如何在Vue.js中创建一个自定义的Tree组件。当后端未提供'open'字段时，该组件展示了如何在前端进行处理。内容包括组件的父组件使用方法及其在缺少关键数据时的解决方案。

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

组件内容

<template>
    <div class="tree-box">
    <div
      class="tree-box-content"
      v-for="nodeItem in data"
      :key="nodeItem.code"
    >
      <div class="notetitle">
        <span
          class="icon"
          @click="childClick(nodeItem)"
          v-if="nodeItem.children.length"
        >
            <i :class="nodeItem.open? 'el-icon-minus' : 'el-icon-plus'" />
        </span>

        <span @click="childClick(nodeItem)">
            <span class="text">{
  { nodeItem[title] }}</span>
        </span>
      </div>
      <div
        v-if="
          nodeItem.children && nodeItem.children.length > 0 && nodeItem.open
        "
      >
        <myTree
          :dat