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

已于 2023-08-11 09:32:10 修改
阅读量5.9k 收藏 9
点赞数 7
分类专栏： # Element-plus 文章标签： javascript 经验分享 elementui vue.js 前端 typescript el-tree
于 2023-06-14 00:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43405300/article/details/131175218
版权

Ⅰ、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

狮子座的男孩
关注
专栏目录
vue3 - element-plus树形控件el-tree快捷全选、反选、清除选择功能，Tree树形控件组件实现点击按钮一键全勾选和一键全取消勾选快捷按钮（详细示例运行源码，一键复制开箱即用！）
高级前端工程师
03-11 4351
vue3，element plus，el-select，树形组件，Tree树形控件，vue3 elementplus如何实现tree树组件一键全选和反选功能，el-select实现全选、取消全选效果，树形下拉选择器组件，element-plus tree树形全选和反选，el-tree实现一键全选、反选功能el-tree 全选，el-tree实现全选/全不选，tree全选全不选,获取所有选中，清空el-tree复选框选中项，el-select下拉框多选实现全选的实现，一键全选多个树形，el-tree树增加全选
【Vue3 + Element-Plus】TreeTransfer树形穿梭框组件
Komorebi_00的博客
04-14 2985
树形穿梭框
el-tree（基本属性 vue3）
qq_38210427的博客
08-02 199
右边是一个数组，是 需要展开index 的 集合（node-key="index"）选中某个节点（是一个），会高亮进行显示。有哪个值，就展开哪个节点。
el tree 使用
azhang190426的博客
08-26 398
https://element.eleme.cn/#/zh-CN/component/tree 想要把选中的节点默认展开：:default-expanded-keys="[2, 3]" 使用场景举例：对已有数据编辑，希望能够展开已选的值方便查看 想要打开的时候把已经勾选的值默认勾选:default-checked-keys="[5]" 使用场景：对已有数据编辑，希望查看已勾选的值 想要实现勾选的父节点默认勾选所以子节点：:check-strictly="false" 使用场景：希望勾...
vue 使用 element-plus 中的el-tree 卡顿问题
最新发布
weixin_43891869的博客
08-06 1201
loadNode(node, resolve)：这是懒加载函数的标准形式，接收两个参数，node 是当前需要加载子节点的树节点，resolve 是一个回调函数，用于将加载的子节点数据“解决”并填充到树节点中。await 会在等待 Promise 解决时暂停函数的执行，这在某些情况下可能会导致不必要的等待，尤其是在主线程上，这可能会影响 UI 的响应性。在某些情况下，如果 loadNode() 方法中包含多个 await 调用，它们会按顺序执行，这可能会阻塞异步执行队列，延迟其他异步操作的执行。
关于element-plus的el-tree 组件常用属性及api及控制可拖动层级，el-tree 自定义全选 单选数据 小笔记
努力飞起的菜鸟
03-19 2685
1 需要控制最大层级 tree 当前到第几可拖动 :allow-drop="allowDrop"2 @check-change="handleCheckbranch" 方法收集选择标识。拖拽时判定目标节点能否成为拖动目标位置。3 拖动配置激活Ui 样式 自定义。
自定义Element Plus树形控件组件：实现全选功能与自定义样式
weixin_47793340的博客
01-26 1670
在Vue.js开发中，树形控件是常用的UI组件之一，用于展示具有层级结构的数据。本文将介绍如何使用Element UI库中的el-tree组件，并结合Vue 3的Composition API，实现一个具有全选功能的树形控件，同时自定义其样式以满足特定的设计需求。
(ElementPlus)操作(不使用 ts): Form表单检验、规则及案例分析(这一篇就够了)
狮子座的男孩
08-19 6460
FormJavaScript在数据被送往服务器前对HTML中的Form 表单中的这些输入数据进行验证的行为就称为表单检验;
element plus 树形控件
thingir的博客
10-21 1472
树形控件全部展开收起 for(var i=0;i<tree.value.store._getAllNodes().length;i++){ tree.value.store._getAllNodes()[i].expanded=dataSet.isShowAll; } 解决办法的文章 树形table展开收起 //先是两个功能按钮 <el-button type="primary" @click="toggleRowExpansion(true)" icon="el-icon-arro
element ui tree树形控件可编辑，新增及删除
weixin_45952668的博客
12-30 6905
我们可以在element ui 官方文档上看到提供的新增及删除方法，大多数人都想要它的可编辑状态，自己优化了一下，写了关于树形控件tree，新增顶级节点及当前节点可编辑删除操作，以及子节点的新增 效果图如下所示 代码如下： <template> <div> <el-button class="addBtn" type="primary" size="small" @click="openAdd
vue3+ts+elementui-plus二次封装树形表格
蜗牛~~
07-25 1493
【代码】vue3+ts+elementui-plus二次封装树形表格。
element-tree-plus.zip
05-05
包含4个为 element-ui 中树形控件实现增删改功能的案例
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
10-14
主要介绍了Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）的方法，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
vue3+element plus 树形控件权限控制
weixin_45621877的博客
02-09 1061
【代码】vue3+element plus 树形控件。
Vue3 Element-Plus Tree组件基本使用
热门推荐
白瑕 的博客
04-29 1万+
快速呈现出简易的一个Tree组件.
element-plus 树形控件用法
m0_73481765的博客
08-09 1155
element-plus 树形控件是一种常用的可视化组件，可以展示树型结构的数据。以下是 element-plus 树形控件的用法。事件表示复选框选中状态变化时的回调函数，可以在回调函数中获取选中的节点。属性绑定了树形结构的默认属性，可以根据具体需求进行修改。属性绑定了一个包含树形结构数据的对象，属性定义了树形结构的默认属性，其中。表示节点的子节点，默认值为。属性定义了树形结构的数据，表示节点的文本，默认值为。属性表示节点前显示复选框，
el-tree的使用
青峦。的博客
11-29 569
el-tree的使用 el-tree复选框的使用 后台返回数据处理为el-tree展示格式，使没有子级时父级也不展示复选框，有子级时展开展示，如下图： 想不起来为什么有红框位置的代码，带我想一下再补充，但是这么写确实解决了我目前关于el-tree的需求 ...
如何对ElementUI、ElementPlus中的Tree树组件进行美化，如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果？本文给你答案！
都随它大小便吧
11-08 7542
ElementUI、ElementPlus树组件功能很不错，但是官方的树形组件没有显示线条，感觉稍微不够大气。于是网上查了一些资料，找了很多也感觉也不够完美，最后找到一个还不错的实现方案，并且再美化改进一下，分享给大家。
element-plus 使用 el-tree-select
08-20
element-plus 是一个基于 Vue.js 的 UI 组件库，el-tree-select 是其中的一个组件，用于实现树形结构的下拉选择。 el-tree-select 组件是在 el-select 组件的基础上进行扩展，使其支持树形结构的数据。使用 el-tree-select，我们可以在下拉列表中展示树状数据，并支持选择树节点的功能。 el-tree-select 的使用方式大致分为以下几步： 1. 引入 element-plus 库，确保已安装并正确引入相关 CSS 和 JS 文件。 2. 在组件中使用 el-tree-select 标签，通过 v-model 绑定选中的节点，将选中的节点值赋给 data 中的一个变量。 3. 设置 el-tree-select 的配置项，包括数据源、显示字段、样式等。 4. 响应选择事件，在 el-tree-select 标签上绑定 change 事件，根据选中的节点进行相应操作。 配置项中常用的属性有： - data：树形数据源，可以是一个数组或者通过异步加载数据。 - label-prop：用于显示节点文本的属性名。 - value-prop：用于取值的属性名。 - default-expand-all：是否默认展开全部节点。 - filterable：是否支持输入框搜索。 el-tree-select 还提供了其他的配置项和方法，可以根据具体需求进行调整和使用。 总之，element-plus 的 el-tree-select 组件提供了一种简单易用的方式来展示和选择树形数据，在Vue.js项目中非常实用。通过合理配置，我们可以灵活定制树形下拉选择框的功能和样式，使其符合项目的需求。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狮子座的男孩

如果可以，请我喝杯咖啡吧！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值