(el-Tree)操作：Element-plus 中Tree 树形控件的样式等的使用

news2024/11/25 6:57:38

Ⅰ、Element-plus 提供的Tree树形控件组件与想要目标情况的对比：

1、Element-plus 提供Tree组件情况：

其一、Element-ui 自提供的Table代码情况为(示例的代码)：

在这里插入图片描述

// Element-plus 自提供的代码：
// 此时是使用了 ts 语言环境，但是我在实际项目中并没有使用 ts 语言和环境；
<template>
  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
</template>

<script lang="ts" setup>
interface Tree {
  label: string
  children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
  console.log(data)
}

const data: Tree[] = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]

const defaultProps = {
  children: 'children',
  label: 'label',
}
</script>

代码地址：https://element-plus.gitee.io/zh-CN/component/tree.html

其二、页面的显示情况为：

在这里插入图片描述

2、目标想修改后的情况:

在这里插入图片描述

Ⅱ、实现 Tree 树形控件达到目标效果变化的过程：

1、Tree 树形控件成功引入 vue3 项目的过程(去除了 ts 的语法)：

其一、代码：

<template>
<!-- div 里面调了一个样式，让组件能够显示在合适的位置; -->
  <div style="margin-top:100px; margin-left: 50px;">
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
</div>
</template>

<script setup>


const handleNodeClick = () => {
  console.log(data)
}

const data = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]

const defaultProps = {
  children: 'children',
  label: 'label',
}
</script>

<style scoped>
</style>

其二、效果展示：

在这里插入图片描述

2、Tree 树形控件添加外边框的过程：

其一、代码：

<template>
  <el-tree :data="data" class="kbc_tree" :props="defaultProps" @node-click="handleNodeClick">
  </el-tree>
</template>

<style scoped>
  .kbc_tree {
  	// 一般是要将边框的颜色设置成白色(即: #ececec)，此时设置成红色，是为了做区别;
    // border: 1px solid #ececec;
    border: 1px solid red;
    margin-top: 12px;
    padding: 12px;
  }
</style>

其二、效果展示：

在这里插入图片描述

3、Tree 树形控件添加数据展示和 button 的过程：

其一、代码：

<template>
    <el-tree :data="data"  :props="defaultProps" @node-click="handleNodeClick">
      <!-- 注意：此时引入数据的用法; -->
      <template #default="{ node, data }">
        <span class="custom_tree_node">
          <span>
            {{isZh()? data.nameCn : data.nameEn}}
            <span class="ctn_id">{{data.categoryId}}</span>
            <span style="margin-left:20px;"><el-button type="warning" size="small" @click="append('add',data,node)">添加关键字</el-button></span>
          </span>
        </span>
      </template>
    </el-tree>
</template>



<script setup>
const isZh = () => {
  return true
}

const handleNodeClick = () => {
  console.log(data)
}

const append = (type,data,node) => {
  console.log(type,11111);
  console.log(data,22222);
  console.log(node,11111);
}

const data = [
  {
    label: 'Level one 1',
    nameCn: '一级产品',
    categoryId: '1111111',
    type: 'parent',
    parentId: '0',
    children: [
      {
        label: 'Level two 1-1',
        nameCn: '一级二级产品',
        categoryId: '1111111-1',
        children: [
          {
            label: 'Level three 1-1-1',
            categoryId: '1111111-1-1',
            nameCn: '一级三级产品'
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    nameCn: '二级一级产品',
    categoryId: '22222222',
    children: [
      {
        label: 'Level two 2-1',
        nameCn: '二级二级产品',
        categoryId: '22222222-1',
        type: 'parent',
        parentId: '0',
        children: [
          {
            label: 'Level three 2-1-1',
            nameCn: '二级三级产品',
            categoryId: '22222222-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        nameCn: '二级二级副产品',
        categoryId: '22222222-2',
        children: [
          {
            label: 'Level three 2-2-1',
            nameCn: '二级三级副产品',
            categoryId: '22222222-2-2',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    nameCn: '三级一级产品',
    categoryId: '3333333333',
    type: 'parent',
    parentId: '0',
    children: [
      {
        label: 'Level two 3-1',
        nameCn: '三级二级产品',
        categoryId: '3333333333-1',
        children: [
          {
            label: 'Level three 3-1-1',
            nameCn: '三级三级产品',
            categoryId: '3333333333-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        nameCn: '三级二级副产品',
        categoryId: '3333333333-2',
        children: [
          {
            label: 'Level three 3-2-1',
            nameCn: '三级三级副产品',
            categoryId: '3333333333-2-2',
          },
        ],
      },
    ],
  },
]

const defaultProps = {
  children: 'children',
  label: 'label',
}
</script>

<style lang="scss" scoped>
   // 此时的 lang="scss" 表示使用的是 sass/scss 语言，需要安装 sass-loader;
  .custom_tree_node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    // 此时的 ::v-deep 是为了深度穿透，一般是 less 的语法；
    //  .ctn_id ::v-deep {
     .ctn_id {
      margin-left: 30px; 
    }
  }
</style>

其二、效果展示：
在这里插入图片描述

Ⅲ、修改 Tree 树形控件达到目标效果的展示：

1、整体的代码(即：总的代码)：

<template>
  <div style="margin-top:100px; margin-left: 50px;">
    <el-tree :data="data" class="kbc_tree" :props="defaultProps" @node-click="handleNodeClick">
      <template #default="{ node, data }">
        <span class="custom_tree_node">
          <span>
            {{isZh()? data.nameCn : data.nameEn}}
            <span class="ctn_id">{{data.categoryId}}</span>
            <span style="margin-left:20px;"><el-button type="warning" size="small" @click="append('add',data,node)">添加关键字</el-button></span>
          </span>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script setup>

const isZh = () => {
  return true
}

const handleNodeClick = () => {
  console.log(data)
}

const append = (type,data,node) => {
  console.log(type,11111);
  console.log(data,22222);
  console.log(node,11111);
}

const data = [
  {
    label: 'Level one 1',
    nameCn: '一级产品',
    categoryId: '1111111',
    type: 'parent',
    parentId: '0',
    children: [
      {
        label: 'Level two 1-1',
        nameCn: '一级二级产品',
        categoryId: '1111111-1',
        children: [
          {
            label: 'Level three 1-1-1',
            categoryId: '1111111-1-1',
            nameCn: '一级三级产品'
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    nameCn: '二级一级产品',
    categoryId: '22222222',
    children: [
      {
        label: 'Level two 2-1',
        nameCn: '二级二级产品',
        categoryId: '22222222-1',
        type: 'parent',
        parentId: '0',
        children: [
          {
            label: 'Level three 2-1-1',
            nameCn: '二级三级产品',
            categoryId: '22222222-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        nameCn: '二级二级副产品',
        categoryId: '22222222-2',
        children: [
          {
            label: 'Level three 2-2-1',
            nameCn: '二级三级副产品',
            categoryId: '22222222-2-2',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    nameCn: '三级一级产品',
    categoryId: '3333333333',
    type: 'parent',
    parentId: '0',
    children: [
      {
        label: 'Level two 3-1',
        nameCn: '三级二级产品',
        categoryId: '3333333333-1',
        children: [
          {
            label: 'Level three 3-1-1',
            nameCn: '三级三级产品',
            categoryId: '3333333333-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        nameCn: '三级二级副产品',
        categoryId: '3333333333-2',
        children: [
          {
            label: 'Level three 3-2-1',
            nameCn: '三级三级副产品',
            categoryId: '3333333333-2-2',
          },
        ],
      },
    ],
  },
]


const defaultProps = {
  children: 'children',
  label: 'label',
}
</script>

<style lang="scss" scoped>
  .kbc_tree {
    // border: 1px solid #ececec;
    border: 1px solid red;
    margin-top: 12px;
    padding: 12px;
    .custom_tree_node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
      //  .ctn_id ::v-deep {
      .ctn_id {
        margin-left: 30px; 
      }
    }
  }
</style>

2、整体效果的展示：

在这里插入图片描述

Ⅳ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/644275.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

06-揭开神秘面纱：Golang method的魅力解析

06-揭开神秘面纱：Golang method的魅力解析

&#x1f4c3;个人主页&#xff1a;个人主页 &#x1f525;系列专栏&#xff1a;Golang基础 &#x1f4ac;Go&#xff08;又称Golang&#xff09;是由Google开发的开源编程语言。它结合了静态类型的安全性和动态语言的灵活性&#xff0c;拥有高效的并发编程能力和简洁的语法。G…
阅读更多...
宝鸡陇县中学弱电系统集成设计方案_kaic

宝鸡陇县中学弱电系统集成设计方案_kaic

摘 要 随着世界各国教育信息化的推进&#xff0c;我国在教育信息基础设施和资源上也在逐步加快步伐。校园信息化平台的建设关系到校园网站的技术实现、广播系统、视频监控系统的建设&#xff0c;能够使知识获取更便捷、校园文化生活更丰富、校园管理更精准。利用信息交互的特性…
阅读更多...
chatgpt赋能python：Python如何排列输出列表的数

chatgpt赋能python：Python如何排列输出列表的数

Python如何排列输出列表的数 Python是一门广泛应用于数据分析、科学计算等领域的编程语言&#xff0c;其简洁易学、强大的编程特性使得其成为很多领域中的首选语言。在Python中&#xff0c;列表是一种非常常见的数据结构&#xff0c;其可以存储大量相关数据&#xff0c;并且通…
阅读更多...
【八大排序(五)】快排进阶篇-挖坑法+前后指针法

【八大排序(五)】快排进阶篇-挖坑法+前后指针法

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:八大排序专栏⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习排序知识   &#x1f51d;&#x1f51d; 快排进阶篇 1. 前情回顾2. 思路回顾3. 单…
阅读更多...
chatgpt赋能python：Python排列组合：让编程更简单

chatgpt赋能python：Python排列组合：让编程更简单

Python排列组合&#xff1a;让编程更简单 Python是一种现代化的编程语言&#xff0c;同时也是一种强大的工具。在Python中&#xff0c;排列组合是极其重要的一种操作。在本篇文章中&#xff0c;我们将介绍Python中的排列组合&#xff0c;并探讨如何利用Python编程语言进行排列…
阅读更多...
十.多线程

十.多线程

1、进程与线程 &#xff08;1&#xff09;操作系统与进程 1.程序&#xff1a;代码。 2.进程&#xff1a;程序的动态执行过程。 &#xff08;2&#xff09;进程与线程 线程&#xff1a;线程&#xff1a;是比进程更小的执行单位&#xff0c;一个进程在其执行过程中&#xff0…
阅读更多...
chatgpt赋能python：Python中如何找到编程中的错误

chatgpt赋能python：Python中如何找到编程中的错误

Python中如何找到编程中的错误 Python是一种旨在提高开发者生产力的高级编程语言。由于其简洁性和可读性&#xff0c;它越来越成为开发者们的首选语言。然而&#xff0c;就像其他编程语言一样&#xff0c;Python编程中难免会有错误。本文将介绍一些有用的技巧和工具&#xff0…
阅读更多...
STM32速成笔记—概述

STM32速成笔记—概述

文章目录 前言一、专栏简介二、前期准备三、编程规范以及程序架构简介1. 编程规范2. 程序架构 四、STM32F103ZET6简介 前言 本人技术菜鸟一枚&#xff0c;2022年大学毕业&#xff0c;大学加入老师实验室&#xff0c;参加过一些嵌入式相关的比赛&#xff0c;获得过2020年TI杯大学…
阅读更多...
【利用AI让知识体系化】简要了解网络七层协议

【利用AI让知识体系化】简要了解网络七层协议

文章目录 一、前言引言目的和意义 二、网络七层协议简介OSI参考模型七层协议分层结构和各层协议简介 三、物理层 - Layer 1物理层概述物理层的作用物理层标准和协议 四、数据链路层 - Layer 2数据链路层概述常见的协议 五、网络层 - Layer 3网络层概述网络层的作用IP地址的作用…
阅读更多...
Nuxt.js：用 Vue.js 打造服务端渲染应用程序

Nuxt.js：用 Vue.js 打造服务端渲染应用程序

文章目录 I. 简介Nuxt.js是什么Nuxt.js的历史和发展Nuxt.js的特点和优势1. 服务端渲染2. 自动生成路由3. 静态文件服务4. 异步数据加载5. 基于Webpack的构建系统6. 支持模块化的Vue组件7. 可定制的ESLint与StyleLint8. 支持PWA等高级功能 II. Nuxt.js基础Nuxt.js的安装和配置Nu…
阅读更多...
ACL2023 | WebCPM：清华发布中文LFQA 数据集，探索搜索引擎和PLM大模型结合新范式

ACL2023 | WebCPM：清华发布中文LFQA 数据集，探索搜索引擎和PLM大模型结合新范式

一、概述 title&#xff1a;WEBCPM: Interactive Web Search for Chinese Long-form Question Answering 论文地址&#xff1a;https://arxiv.org/abs/2305.06849 代码&#xff1a;https://github.com/thunlp/WebCPM 1.1 Motivation 开发一个类似于WebGPT一样的中文版本的…
阅读更多...
如何保证数据库分布式事务的强一致性

如何保证数据库分布式事务的强一致性

文章目录 概要整体架构流程技术名词解释技术细节小结 概要 针对分布式数据库&#xff0c;如何保证分布式事务的强一致性&#xff0c;是分布式数据库的关键。分布式事务的强一致性方案这里介绍两种&#xff0c;一种是GTM(global transaction manager),另一种是基于XA协议的两阶…
阅读更多...
12道前端知识题目深入浅出下JavaScript

12道前端知识题目深入浅出下JavaScript

文章目录 1. 原型和原型链2. 作用域和闭包3. 高阶函数和函数式编程4. 异步编程和Promise、async/await5. 正则表达式6. 对象属性描述符和代理7. ES6新特性如模板字符串、解构赋值、箭头函数、let/const等8. 设计模式和架构模式设计模式架构模式 9. 性能优化技巧和调试技巧1. 性…
阅读更多...
chatgpt赋能python：Python如何持续保存CSV文件

chatgpt赋能python：Python如何持续保存CSV文件

Python如何持续保存CSV文件 如果你需要不断更新数据并将其保存到CSV文件中&#xff0c;Python语言可以轻松完成这个任务。本文将介绍如何使用Python在代码执行的同时&#xff0c;将数据不断写入CSV文件中&#xff0c;实现持续保存的功能。 CSV文件是什么&#xff1f; CSV代表…
阅读更多...
chatgpt赋能python：抓包是什么？

chatgpt赋能python：抓包是什么？

抓包是什么&#xff1f; 当我们在浏览器中访问一个网站时&#xff0c;我们的电脑会向网络服务器发送请求并接收响应。这个过程中&#xff0c;有一些工具可以让我们查看和分析这些请求和响应&#xff0c;其中最常用的就是“抓包”。 抓包就是指截获网络通信过程中的数据包并分…
阅读更多...
chatgpt赋能python：Python怎么指定循环次数？

chatgpt赋能python：Python怎么指定循环次数？

Python怎么指定循环次数&#xff1f; Python是一种广泛应用于编程领域的高级编程语言&#xff0c;它具有简单易学、代码可读性强、语言编写规范等诸多优点。其中&#xff0c;循环是Python语法中的重要一环&#xff0c;而如何指定循环次数则是其中一个重要的问题。 什么是循环…
阅读更多...
Linux 检测通信路径上的PMTU(路径最大传输单元)

Linux 检测通信路径上的PMTU(路径最大传输单元)

问题描述 终端设备向云端POST数据&#xff0c;数据量较小的没有问题&#xff0c;数据量大的必然出现丢包。网络很通畅&#xff0c;延迟较低。 分析 后来发现&#xff0c;终端到云端的通信路径上某个路由器节点的MTU小于终端的MTU&#xff0c;当终端发出的IP数据包长度大于该…
阅读更多...
力扣题库刷题笔记4--寻找两个正序数组的中位数

力扣题库刷题笔记4--寻找两个正序数组的中位数

1、题目如下&#xff1a; 2、个人Python代码实现如下&#xff1a; 代码如下&#xff1a; class Solution: def findMedianSortedArrays(self, nums1: List[int], nums2: List[int]) -> float: nums nums1 nums2 #合并数组 nums.sort() …
阅读更多...
java【toString覆写】

java【toString覆写】

笔试题 输出结果&#xff1a;D.func(),num0 解析&#xff1a; 继承的原则&#xff0c;先调用父类的无参构造&#xff0c;因此调用func()函数func() 此方法&#xff0c;new 的是 D 的对象&#xff0c;且被D所重写&#xff0c;触发动态绑定&#xff0c;直接调用D中的func()方法在…
阅读更多...
Jupyter Notebook是什么及使用

Jupyter Notebook是什么及使用

一、什么是Jupyter Notebook Jupyter项目是一个非盈利的开源项目&#xff0c;源于2014年的python项目&#xff0c; Juptter Notebook&#xff0c;原名IPython Notbook&#xff0c;是IPython的加强网页版&#xff0c;一个开源web应用程序名字源自Julia、Python和R是一款程序员…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023