vue3使用element-plus，树组件el-tree增加引导线

🕗 发布于 2024-11-10 07:33 vue.js javascript css3 element-plus elementui

vue3使用element-plus，树组件el-tree增加引导线

vue3项目element-plus，树组件el-tree增加引导线

element-plus组件库的el-tree样式
在这里插入图片描述

因为element的样式不满足当前的的需求，UI图，所以对el-tree进行增加了引导线
修改样式如下，增加引导线，并且实现增删，输入框

在这里插入图片描述

代码实现

1、在vue3中组件里面template模板引入el-tree组件，需要设置:indent=“0”，不然每层树padding-left呈18px的倍数增加

<div class="mytree">
            <el-tree
                :indent="0"
                :data="data"
                :props="defaultProps"
                :expand-on-click-node="false"
                :highlight-current="false"
                node-key="id"
                @node-click="handleNodeClick"
                :default-expanded-keys="expDtable"
              >
              </el-tree>
</div>

indet：设置每层叔padding-left为0
data：绑定的展示数据
props：配置选项，里面配置节点，子节点字段等，默认绑定子节点children，element-plus里面有详细的解说[Tree 树形控件 | Element Plus]
expand-on-click-node：是否在点击节点的时候展开或者收缩节点，默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
node-key：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
node-click：当节点被点击的时候触发
default-expanded-keys：默认展开节点

2.在setup中声明变量data，defaultProps，handleNodeClick，expDtable

import { computed, shallowRef,ref,onMounted } from 'vue';

const expDtable = ref([])

const data = ref([
  {
    name: '',
    type: '',
    describe: '',
    cekk: true,
    id: 1
  }
])

const defaultProps = {
  children: 'children',
  label: 'label',
}
const handleNodeClick = data => {
  console.log(data)
}

3.在el-tree里面写入输入框已经增删，接着上面模板的代码我们往里面继续写

 <el-tree
                :indent="0"
                :data="data"
                :props="defaultProps"
                :expand-on-click-node="false"
                :highlight-current="false"
                node-key="id"
                @node-click="handleNodeClick"
                :default-expanded-keys="expDtable"
              >
                <template #default="{ node, data }">
                  <!-- {{node.level}} -->
                  <div class="custom-tree-node" style="display: flex; width: 100%">
                    <div :style="{'width': node.level == 1 ? '120px' : node.level == 2 ? '100px' : '80px'}">
                      <el-input v-model="data.name" placeholder="变量名" :disabled="data.id == 1" />
                    </div>
                    <div style="width: 100px; margin-left: 10px">
                      <el-select v-model="data.type" placeholder="Select" :disabled="data.id == 1">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </div>
                    <div style="width: 120px; margin-left: 10px">
                      <el-input
                        v-model="data.describe"
                        placeholder="请输入用户变量用途"
                        type="number"
                        :disabled="data.id == 1"
                      />
                    </div>
                    <div style="width: 50px; text-align: center; margin-left: 20px">
                      <el-checkbox type="checkbox" v-model="data.cekk" :disabled="data.id == 1" />
                    </div>
                    <div style="width: 40px; text-align: right">
                      <span style="cursor: pointer" v-if="data.type == '2' && data.boolean != 1" @click="childAdd(node,data)"
                        >+</span
                      >
                    </div>
                    <div style="width: 40px; text-align: right">
                      <span style="cursor: pointer" v-if="data.id != 1" @click="remove(node, data)">-</span>
                    </div>
                  </div>
                </template>
              </el-tree>

4.在setup里面加上我们的新增方法，删除方法，以及选择框绑定的数据

import { computed, shallowRef,ref,onMounted } from 'vue';

const containerRef = shallowRef()
const options = [
  {
    value: '1',
    label: 'javaScript'
  },
  {
    value: '2',
    label: 'Array<object>'
  }
]


const expDtable = ref([])

const data = ref([
  {
    name: '',
    type: '',
    describe: '',
    cekk: true,
    id: 1
  }
])
// 新增
const addUser = () => {
  data.value.push({
    name: '',
    type: '',
    describe: '',
    cekk: true,
    children: [],
    id: getRandomSixDigitNumber()
  })
}

const remove = (node, datas) => {
  const parent = node.parent;
    const children = parent.data.children || parent.data;
    const index = children.findIndex(d => d.id === datas.id);
    children.splice(index, 1)
}

const getRandomSixDigitNumber = () => {
  // 生成一个介于0（包含）和1（不包含）之间的随机浮点数
  let randomFloat = Math.random()

  // 将这个浮点数放大到1000000（10^6）的范围内，并四舍五入到最近的整数
  let randomInt = Math.floor(randomFloat * 1000000)

  // 检查生成的数是否小于100000（六位数的最小值），如果是，则加上100000
  // 确保生成的数是一个六位数
  if (randomInt < 100000) {
    randomInt += 100000
  }

  return randomInt
}

const childAdd = (node,value) => {
  if (node.level == 3) {
    return false
  }
  expDtable.value = [value.id]
  value.children.push({
    name: '',
    type: '',
    describe: '',
    cekk: true,
    id: getRandomSixDigitNumber(),
    children: []
  })
  data.value = data.value
}
const defaultProps = {
  children: 'children',
  label: 'label',
}
const handleNodeClick = data => {
  console.log(data)
}

5.最后就是css，主要代码实现在css部分，该项目使用scss，deep深度选择器使用如下方式，css代码如下

<style>
/* 鼠标浮动过的背景颜色 */
.el-tree-node__content:hover {
  background: #eeeeee;
}
/* 鼠标点击时节点的背景颜色 */
.el-tree-node:focus>.el-tree-node__content {
  background-color: #eeeeee !important;
  color: node;
}
/* 鼠标失去焦点时节点背景的颜色 */
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background: #eeeeee;
}</style>

<style lang="scss" scoped>
::v-deep .el-input__wrapper {
  border-radius: 10px;
}
::v-deep .el-select__wrapper {
  border-radius: 10px;
}
.mytree {
  width: 110%;
  margin-left: -30px;
}
:deep(.mytree) {
  .el-tree-node {
    position: relative;
    padding-left: 10px;
    margin-top: 10px;
    // height:50px;
    background: none;
    // margin-bottom: 10px;
  }
  .el-tree-node__children {
    padding-left: 10px;
    // height:100px;
    // margin-top:10px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree {
    background: none;
  }

  .el-tree-node:before {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
    border-left: 1px dashed #1389bc;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree-node:after {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
    border-top: 1px dashed #1389bc;
    height: 20px;
    top: 12px;
    width: 18px;
  }
  // .el-tree .el-tree-node__expand-icon.expanded {
  //   -webkit-transform: rotate(0deg);
  //   transform: rotate(0deg);
  // }
  .el-tree .el-icon-caret-right:before {
    content: '\e723';
    font-size: 16px;
    color: #1389bc;
    position: absolute;
    left: -20px;
    top: -8px;
  }
  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: '\e722';
    font-size: 16px;
    color: #1389bc;
    position: absolute;
    left: -20px;
    top: -8px;
  }
  .el-tree-node__expand-icon.is-leaf:before {
    content: '\e722';
    font-size: 16px;
    color: #1389bc;
    position: absolute;
    left: -20px;
    top: -8px;
  }
  .el-tree-node__content > .el-tree-node__expand-icon {
    padding: 0;
    // padding:10px 0;
  }
}
.start {
  width: 100%;
  // height: 400px;
  background: #eeeeee;
  margin: 0 auto;
  border-radius: 5px;
  .start-input {
    font-weight: 700;
    margin: 0 20px;
  }
  .table {
    width: 90%;
    margin: 0 auto;
    .table-row {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #ccc;
    }
    .table-row-one {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .button {
    margin: 0 20px;
  }
}
</style>

完整代码

<template>
  <div style="padding: 10px; width: 100%;">
    <div class="start" style=" overflow: auto">
      <div class="start-input">输入</div>
      <div class="table">
        <div class="table-row">
          <div class="table-header" style="width: 18%">变量名</div>
          <div class="table-header" style="width: 13%">变量类型</div>
          <div class="table-header" style="width: 15%; text-align: center">描述</div>
          <div class="table-header">是否必要</div>
          <div class="table-header"></div>
          <div class="table-header"></div>
        </div>
        <div>
          <div class="table-row-one">
            <!-- <div style="width: 20%">
            <el-input v-model="input" placeholder="Please input" />
          </div>
          <div style="width: 25%">
            <el-select v-model="value" placeholder="Select">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div style="width: 25%">
            <el-input v-model="input1" placeholder="Please input" type="number" />
          </div>
          <div style="width: 25%; margin-right: -70px">
            <el-checkbox type="checkbox" />
          </div>
          <div>
            <span style="cursor: pointer">+</span>
          </div>
          <div>
            <span style="cursor: pointer">-</span>
          </div> -->
            <div class="mytree">
              <el-tree
                :indent="0"
                :data="data"
                :props="defaultProps"
                :expand-on-click-node="false"
                :highlight-current="false"
                node-key="id"
                @node-click="handleNodeClick"
                :default-expanded-keys="expDtable"
              >
                <template #default="{ node, data }">
                  <!-- {{node.level}} -->
                  <div class="custom-tree-node" style="display: flex; width: 100%">
                    <div :style="{'width': node.level == 1 ? '120px' : node.level == 2 ? '100px' : '80px'}">
                      <el-input v-model="data.name" placeholder="变量名" :disabled="data.id == 1" />
                    </div>
                    <div style="width: 100px; margin-left: 10px">
                      <el-select v-model="data.type" placeholder="Select" :disabled="data.id == 1">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </div>
                    <div style="width: 120px; margin-left: 10px">
                      <el-input
                        v-model="data.describe"
                        placeholder="请输入用户变量用途"
                        type="number"
                        :disabled="data.id == 1"
                      />
                    </div>
                    <div style="width: 50px; text-align: center; margin-left: 20px">
                      <el-checkbox type="checkbox" v-model="data.cekk" :disabled="data.id == 1" />
                    </div>
                    <div style="width: 40px; text-align: right">
                      <span style="cursor: pointer" v-if="data.type == '2' && data.boolean != 1" @click="childAdd(node,data)"
                        >+</span
                      >
                    </div>
                    <div style="width: 40px; text-align: right">
                      <span style="cursor: pointer" v-if="data.id != 1" @click="remove(node, data)">-</span>
                    </div>
                  </div>
                </template>
              </el-tree>
            </div>
          </div>
        </div>
      </div>
      <div class="button">
        <el-button
          v-for="button in buttons"
          @click="addUser()"
          :key="button.text"
          :type="button.type"
          text
          bg
          style="margin-top: 30px"
        >
          {{ button.text }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, shallowRef,ref,onMounted } from 'vue';

const buttons = [{ type: 'primary', text: '+新增' }]

const input = ref('')
const input1 = ref('')

const value = ref('')
const options = [
  {
    value: '1',
    label: 'javaScript'
  },
  {
    value: '2',
    label: 'Array<object>'
  }
]


const expDtable = ref([])

const data = ref([
  {
    name: '',
    type: '',
    describe: '',
    cekk: true,
    id: 1
  }
])
// 新增
const addUser = () => {
  data.value.push({
    name: '',
    type: '',
    describe: '',
    cekk: true,
    children: [],
    id: getRandomSixDigitNumber()
  })
}

const remove = (node, datas) => {
  const parent = node.parent;
    const children = parent.data.children || parent.data;
    const index = children.findIndex(d => d.id === datas.id);
    children.splice(index, 1)
  // const parent = node.parent
  // const children = parent.data.children || parent.data
  // console.log(children)
  // const id = children.filter(d => d.id === datas.id)
  // if (id.length > 0) {
  //   console.log(id[0].id)
  //  const T = data.value.slice(id[0].id, 1)
  //   console.log(data.value)
  //   console.log(T)
  // data.value = [...data.value]
  // }

}

const getRandomSixDigitNumber = () => {
  // 生成一个介于0（包含）和1（不包含）之间的随机浮点数
  let randomFloat = Math.random()

  // 将这个浮点数放大到1000000（10^6）的范围内，并四舍五入到最近的整数
  let randomInt = Math.floor(randomFloat * 1000000)

  // 检查生成的数是否小于100000（六位数的最小值），如果是，则加上100000
  // 确保生成的数是一个六位数
  if (randomInt < 100000) {
    randomInt += 100000
  }

  return randomInt
}

const childAdd = (node,value) => {
  if (node.level == 3) {
    return false
  }
  expDtable.value = [value.id]
  value.children.push({
    name: '',
    type: '',
    describe: '',
    cekk: true,
    id: getRandomSixDigitNumber(),
    children: []
  })
  data.value = data.value
}
const defaultProps = {
  children: 'children',
  label: 'label',
}
const handleNodeClick = data => {
  console.log(data)
}
</script>


<style>
/* 鼠标浮动过的背景颜色 */
.el-tree-node__content:hover {
  background: #eeeeee;
}
/* 鼠标点击时节点的背景颜色 */
.el-tree-node:focus>.el-tree-node__content {
  background-color: #eeeeee !important;
  color: node;
}
/* 鼠标失去焦点时节点背景的颜色 */
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background: #eeeeee;
}</style>

<style lang="scss" scoped>
::v-deep .el-input__wrapper {
  border-radius: 10px;
}
::v-deep .el-select__wrapper {
  border-radius: 10px;
}
.mytree {
  width: 110%;
  margin-left: -30px;
}
:deep(.mytree) {
  .el-tree-node {
    position: relative;
    padding-left: 10px;
    margin-top: 10px;
    // height:50px;
    background: none;
    // margin-bottom: 10px;
  }
  .el-tree-node__children {
    padding-left: 10px;
    // height:100px;
    // margin-top:10px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree {
    background: none;
  }

  .el-tree-node:before {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
    border-left: 1px dashed #1389bc;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree-node:after {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
    border-top: 1px dashed #1389bc;
    height: 20px;
    top: 12px;
    width: 18px;
  }
  // .el-tree .el-tree-node__expand-icon.expanded {
  //   -webkit-transform: rotate(0deg);
  //   transform: rotate(0deg);
  // }
  .el-tree .el-icon-caret-right:before {
    content: '\e723';
    font-size: 16px;
    color: #1389bc;
    position: absolute;
    left: -20px;
    top: -8px;
  }
  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: '\e722';
    font-size: 16px;
    color: #1389bc;
    position: absolute;
    left: -20px;
    top: -8px;
  }
  .el-tree-node__expand-icon.is-leaf:before {
    content: '\e722';
    font-size: 16px;
    color: #1389bc;
    position: absolute;
    left: -20px;
    top: -8px;
  }
  .el-tree-node__content > .el-tree-node__expand-icon {
    padding: 0;
    // padding:10px 0;
  }
}
.start {
  width: 100%;
  // height: 400px;
  background: #eeeeee;
  margin: 0 auto;
  border-radius: 5px;
  .start-input {
    font-weight: 700;
    margin: 0 20px;
  }
  .table {
    width: 90%;
    margin: 0 auto;
    .table-row {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #ccc;
    }
    .table-row-one {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .button {
    margin: 0 20px;
  }
}
</style>

原文地址：https://blog.csdn.net/m0_74079648/article/details/143652508

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：从零创建vue+elementui+sass+three.js项目
下一篇：docker中widows安装mysql

Java爬虫（Jsoup）详解
Jsoup 是一款 Java 的 HTML 解析器，能够直接解析 URL 地址或 HTML 文本内容。它提供了一套非常省力的 API，可以通过 DOM、CSS 选择器以及类似于 jQuery 的操作方
阅读更多2024-11-18
【Linux】基础IO
文件=内容+属性。文件存储于磁盘上，即使是没有内容的空文件，因为属性信息仍占有一定的空间。Linux在文件的内容和属性是分开存储的。文件的操作本质是进程与被打开文件的关系。NAMESYNOPSISN
阅读更多2024-11-18
DevEco Studio 5.0.1 Beta3安装及配置
下载得到devecostudio-windows-5.0.5.200.zip文件。解压，得到deveco-studio-5.0.5.200.exe安装文件。
阅读更多2024-11-18
【MYSQL】读写分离【自我复习版】
所以先配置好主从机制，然后读写分离，实际上就是为了避免DML操作过慢导致查询速度下降，所以将主节点作为DML操作的库，然后把从节点当做DQL操作的库。所以就不能保证数据库的高可用。可以通过业务分类操作
阅读更多2024-11-18
Essential Cell Biology--Fifth Edition--Chapter one (7)
在内质网、高尔基体、溶酶体、质膜和细胞外部之间进行着持续的物质交换。这种交换是由运输囊泡[transport vesicles]介导[is mediated by]的，这些囊泡从一个细胞器的膜上夹下来
阅读更多2024-11-18
windows C#-创建记录类型(下)
记录是使用基于值的相等性的类型。 C# 10 添加了 record structs，以便你可以将记录定义为值类型。两个记录类型的变量在它们的类型和值都相同时，它们是相等的。两个类类型的变量如果引用
阅读更多2024-11-18
第8章利用CSS制作导航菜单
而且，用户浏览的习惯都是从上到下、从左往右的，将导航放置底部，这样的设计比较挑战用户的使用习惯。仍然是在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表&
阅读更多2024-11-18
【文化课学习笔记】【化学】有机相关知识梳理
有机相关知识梳理有机物的化学性质有机物主要化学反应高中有机主要反应(不涉及加聚、缩聚)：烃三角涵盖了烷、烯、炔和卤代烃三种烃类的关系，可逆三角中的三类物质可以互相转化、醇醛酸酯化三角主要反应以连续氧化
阅读更多2024-11-18
渗透测试---shell（3）脚本参数传递与数学运算
本文主要阐释了shell脚本的参数传递与数学运算，希望对你有所帮助咯。
阅读更多2024-11-18
题解：AtCoder Beginner Contest AT_abc380_d ABC380D Strange Mirroring
解释一下，这堆东西每两行为一组，每组中第一行为位置，第二行为编号（一或二）。第一组是刚才说的一号二号串的组合，第二组就是把第一组中的。当然不能直接计算出来了，不过可以递归。单次查询的时间复杂度不高，递
阅读更多2024-11-18

vue3使用element-plus，树组件el-tree增加引导线