【Vue项目实战8】资源树el-tree的input形式【Element UI】==＞ 添加分级图标样式==＞ 选中节点显示操作栏（新建 修改 删除）==＞弹框新增 删除

最新推荐文章于 2024-04-29 10:42:46 发布
最新推荐文章于 2024-04-29 10:42:46 发布
阅读量1.8k 收藏 9
点赞数 2
分类专栏： Vue项目实战 elementUI组件优化 文章标签： vue.js javascript 前端 elementui el-tree
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sabrina_cc/article/details/125390097
版权

记住要永远把自己放在优先考虑项。

上一篇博客我们已经介绍过el-tree样式修改的一种了【Vue项目实战7】【ElementUI样式优化】el-tree==＞添加分级图标==＞添加引导线样式==＞【node-click】点击节点展示全部父节点信息==＞使用$store封装全局组件使用_小白Rachel的博客-CSDN博客

这篇博客我们继续整理另一种el-tree样式的优化。 

 本篇博客实现效果速览：（看看是否满足你的需求）

（1）CSS分层图标和分层样式（以五层为最大）

（2）选中节点展示【操作栏】包含：新增子节点，修改当前节点，删除当前节点

（3）选中节点 == 修改时回显选中节点和父节点；新增时展示当前节点；

（4）新增一级节点

（5）父节点使用若依自带的treeselect组件

目录

一、基础树结构

 二、优化tree前端样式

1.资源分组树的input形式

2.添加分层图标和分层样式

 三、添加功能效果

1.新建一级资源分组（弹框）

2.点击节点出现【操作栏】

3.新增/修改 选中节点的子节点（弹框）

4.父节点使用若依自带treeselect组件

附：全部页面代码（速看）

一、基础树结构

首先，给出最基础的树结构，（1）节点默认展开；（2）取消展开收起效果

<template>
  <div class="app-content">
    <div class="app-container">
      <!-- 资源分组树 -->
      <div>
        <div style="height: 400px; padding-bottom: 10px; width: 200px">
          <div class="treeBox">
            <el-tree
              :data="resourceData.data"
              node-key="id"
              ref="tree"
              default-expand-all
              :expand-on-click-node="false"
              :props="defaultProps"
              class="tree"
              style="width: 100%"
              @node-click="handle"
              highlight-current 
            >
            </el-tree>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "resourceTree",
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
        value: "id",
      },
      resourceData: {
        code: 200,
        message: "SUCCESS",
        data: [
          {
            id: "c21d02ec204c3d9f9591a45a67f58195",
            name: "在用资源",
            parentId: "",
            children: [
              {
                id: "5cbf0e4bf6c455f2b90f26dccc7f2c7c",
                name: "测试组1",
                parentId: "c21d02ec204c3d9f9591a45a67f58195",
                children: [
                  {
                    id: "af5c690fb122371074db20eb19e474b2",
                    name: "测试组1.3",
                    parentId: "5cbf0e4bf6c455f2b90f26dccc7f2c7c",
                    children: [
                      {
                        id: "e5268c1b5f6fb09152739fc07cfc2a4b",
                        name: "测试组1.4",
                        parentId: "af5c690fb122371074db20eb19e474b2",
                        children: [
                          {
                            id: "a02b0e65def409e6b217c01f54e5732a",
                            name: "测试组1.5",
                            parentId: "e5268c1b5f6fb09152739fc07cfc2a4b",
                            children: [],
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
              {
                id: "88f69770e9d94e32d81ea49eb2bf05e8",
                name: "测试组2",
                parentId: "c21d02ec204c3d9f9591a45a67f58195",
                children: [],
              },
              {
                id: "294c01cd26f41cb54dd75c0098335b5b",
                name: "317平台",
                parentId: "c21d02ec204c3d9f9591a45a67f58195",
                children: [
                  {
                    id: "936fba4555abad9872803d90a5304fdc",
                    name: "烽火",
                    parentId: "294c01cd26f41cb54dd75c0098335b5b",
                    children: [
                      {
                        id: "4a5d79d291fc74e495d6ee7129fa213e",
                        name: "涉访专项",
                        parentId: "936fba4555abad9872803d90a5304fdc",
                        children: [],
                      },
                    ],
                  },
                ],
              },
              {
                id: "cb6cd8a969c41698e00f7c6a9ad36d38",
                name: "zB系统",
                parentId: "c21d02ec204c3d9f9591a45a67f58195",
                children: [],
              },
            ],
          },
          {
            id: "eaced9ffb820418cbe98691c781c6baa",
            name: "空闲资源",
            parentId: "",
            children: [],
          },
        ],
        success: true,
      },
      treeGroup: [],
    };
  },
  created() {},
  methods: {},
};
</script>

<style lang="scss" rel="stylesheet/scss"  scoped>
</style>

 二、优化tree前端样式

UI给出的设计稿如下

1.资源分组树的input形式

 注意观察，其实并不是input形式，只是样式有点像input

如果在树节点添加input会是这样的效果：

 存在的问题：需要给input添加内置图标，添加竖杆博主按照这种思路没有实现最终的效果，大家可以试试。

//-------------1.修改节点input框样式----------
.el-tree ::v-deep .el-tree-node .el-tree-node__content {
  width: 260px;
  height: 40px;
  background: rgb(255, 255, 255);
  margin: 5px 40px 0px 8px;
  color: #666666;
  font-size: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding-left: 4px !important;
}
// 节点和子节点的tab间距
.tree ::v-deep .el-tree-node {
  position: relative;
  padding-left: 46px;
}
// 选中之后的颜色变化
.el-tree ::v-deep .is-current > .el-tree-node__content {
  border: 2px solid #2181f5;
}

修改后的效果：

 2.添加分层图标和分层样式

为了添加图标和内部的颜色条效果，需要在el-tree中添加代码

<span class="custom-tree-node1" slot-scope="{ node, data }">
     <span class="el-tree-node__label hh">{{ node.label }}</span>
</span>
// ----------2.添加分层图标和样式--------
.custom-tree-node1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  // padding-left: 8px;
  padding-top: 7px;
}
// 一级节点图标
.el-tree ::v-deep .el-tree-node__content .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/1.png") no-repeat 0 3px;
}
// 颜色装饰
.el-tree ::v-deep .el-tree-node__content:before {
  content: "";
  min-width: 3px !important;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #103289;
}
// 二级节点
.el-tree ::v-deep .el-tree-node__children .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/2.png") no-repeat 0 3px;
}
.el-tree ::v-deep .el-tree-node__children .el-tree-node__content:before {
  content: "";
  width: 3px;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #506cfe;
}
// 三级节点
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/3.png") no-repeat 0 3px;
}
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content:before {
  content: "";
  width: 3px;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #2181f5;
}
// 四级节点
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/4.png") no-repeat 0 3px;
}
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content:before {
  content: "";
  width: 3px;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #00b9ff;
}
// 五级节点
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/5.png") no-repeat 0 3px;
}
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content:before {
  content: "";
  width: 3px;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #fe9c50;
}
// 调整文字label高度
.hh {
  background: #fe9c50;
  content: "";
  display: block;
  width: 3px;
  height: 26px;
  background-size: 16px;
  margin-right: 10px;
}


//-------------1.修改节点input框样式----------
.el-tree ::v-deep .el-tree-node .el-tree-node__content {
  width: 260px;
  height: 40px;
  background: rgb(255, 255, 255);
  margin: 5px 40px 0px 8px;
  color: #666666;
  font-size: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding-left: 4px !important;
}
// 节点和子节点的tab间距
.tree ::v-deep .el-tree-node {
  position: relative;
  padding-left: 46px;
}
// 选中之后的颜色变化
.el-tree ::v-deep .is-current > .el-tree-node__content {
  border: 2px solid #2181f5;
}

 三、添加功能效果

 效果说明：（1）点击‘新建一级资源分组’ 后弹框添加分组

（2）点击节点后==> 该节点显示操作栏{新建 修改 删除}

（3）点击节点后==> 点击‘新建’==> 弹框添加子节点分组

（4）点击节点后==>点击‘修改’==>弹框修改节点，同时支持修改上级

（5）点击节点后==>点击‘删除’==>删除该节点和节点的全部子节点

1.新建一级资源分组（弹框）

主要涉及data字段

title: "", // 弹框标题-新建/编辑
newVis: false, // 控制弹框显示
form: {}, //弹框表格
isfirst: false, // 是否是新建一级节点-控制父节点显示
isEdit: false, // 编辑-删除
rule: {
        name: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
},

（1）点击‘新建一级分组’时，调用handle1()函数；

（2）使用newVIs控制弹框显示。==> title控制标题文字；

（3）绑定rule校验规则； 

（4）通过isfirst判断是否是新增一级节点 ==> 需要隐藏form表单中的‘父节点’

<!-- 新建=编辑 弹窗 -->
      <el-dialog
        :close-on-click-modal="false"
        :title="title"
        :visible.sync="newVis"
        width="500px"
        append-to-body
      >
        <el-form ref="form" :model="form" :rules="rule" label-width="120px">
          <el-form-item label="父节点:" prop="parentId" v-if="!isfirst">
            <!-- <el-input v-model="form.parentId" placeholder="请输入" /> -->
            <treeselect
              v-model="form.parentId"
              :multiple="false"
              :options="treeData"
              :props="fullProps"
              placeholder="请选择"
              :normalizer="normalizer"
              :disabled="isEdit ? false : true"
            />
          </el-form-item>
          <el-form-item label="资源分组名称:" prop="name">
            <el-input v-model="form.name" placeholder="请输入" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            size="mini"
            @click="createGroup()"
            v-if="isEdit ? false : true"
            >确 定</el-button
          >
          <el-button type="primary" size="mini" @click="editGroup()" v-else
            >修 改</el-button
          >
          <el-button @click="cancel()" size="mini">取 消</el-button>
        </div>
      </el-dialog>

 2.点击节点出现【操作栏】

 （1）operationVis 用于控制操作栏的显示与隐藏；==>通过在handleNodeClick（）中this.operationVis = data.id; 记录选中的节点id来在el-tree中寻找到选中的节点

在el-tree组件中添加如下代码：

<div class="tree">
        <el-tree
          ref="tree"
          :data="treeData"
          :check-strictly="true"
          node-key="id"
          default-expand-all
          :props="defaultProps"
          style="width: 900px"
          highlight-current
          check-on-click-node
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
          <!-- @check="changetree"
          @check-change="handleNodeClick" -->
          <span class="custom-tree-node1" slot-scope="{ node, data }">
            <!-- <span class="el-tree-node__label"></span>-->
            <span class="el-tree-node__label hh">{{ node.label }}</span>
            <span class="operation1" v-show="data.id == operationVis">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handle(0)"
                >新建</el-button
              >
              <el-button plain size="mini" @click="handle(1)">修改</el-button>
              <el-button plain size="mini" @click="handleDelete()"
                >删除</el-button
              >
            </span>
          </span>
        </el-tree>
      </div>

（2）setCheckedKeys   通过 keys 设置目前勾选的节点

通过 this.$refs.tree.setCheckedKeys([data.id]); 记录当前节点的id,方便新增此操作时获取到父节点信息，方便编辑时回显信息。

// 树节点击函数
    handleNodeClick(data) {
      // if (data.id !== "eaced9ffb820418cbe98691c781c6baa") {   // 空闲节点不可编辑
        this.operationVis = data.id;
      // } else {
      //   this.operationVis = -1;
      // }
      this.$refs.tree.setCheckedKeys([data.id]);
    },

 3.新增/修改 选中节点的子节点（弹框）

 // 区分下面三个函数

getCurrentNode    获取当前被选中节点的 data，若没有节点被选中则返回 null

getCheckedNodes  若节点可被选择，则返回目前被选中的节点所组成的数组

getCheckedKeys   若节点可被选择，则返回目前被选中的节点的 key 所组成的数组

选中节点之后，打印选中节点的信息

console.log("current", this.$refs.tree.getCurrentNode());
console.log("checked", this.$refs.tree.getCheckedNodes());
console.log("checkedkey", this.$refs.tree.getCheckedKeys());

 

 

 

（1）点击‘添加’或‘修改’，分别调用handel(0);  handle(1)  用于回显数据

（2）当点击‘新增’ 需要回显父节点信息

（3）当点击‘编辑’需要回显当前节点和父节点信息

// 新建-修改弹框
    handle(isEdit) {
      this.isfirst = false;
      this.isEdit = isEdit;
      if (isEdit) {
        // 如果没有选中-显示提示信息
        if (this.$refs.tree.getCheckedKeys().length == 0) {
          this.$message.warning("请选中资源分组进行修改");
        } else {
          this.title = "修改资源分组";
          this.newVis = true;
          this.form = {
            parentId: this.$refs.tree.getCheckedNodes()[0].parentId
              ? this.$refs.tree.getCheckedNodes()[0].parentId
              : null,
            name: this.$refs.tree.getCheckedNodes()[0].name,
          };
        }
      } else {
        this.newVis = true;
        this.title = "新建资源分组";
        this.form = {
          parentId: this.$refs.tree.getCheckedKeys()[0], // 选中的节点（可能是父节点）
          name: "",
        };
      }
    },

4.父节点使用若依自带treeselect组件

本系统使用的是若依框架，自带treeselect组件，可以直接使用，在此不做详细说明。

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

components: { Treeselect },
<treeselect
              v-model="form.parentId"
              :multiple="false"
              :options="resourceData.data"
              :props="fullProps"
              placeholder="请选择"
              :normalizer="normalizer"
              :disabled="isEdit ? false : true"
/>

附：全部页面代码（速看）

<template>
  <div class="app-content">
    <div class="app-container">
      <!-- 资源分组树 -->
      <div>
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="small"
          @click="handle1()"
          style="margin-left: 50px; width: 200px"
          >新建一级资源分组</el-button
        >
        <div style="min-height: 400px; padding-bottom: 10px; width: 1000px">
          <div class="treeBox">
            <div class="tree">
              <el-tree
                ref="tree"
                :data="resourceData.data"
                :check-strictly="true"
                node-key="id"
                default-expand-all
                :props="defaultProps"
                style="width: 900px"
                highlight-current
                check-on-click-node
                :expand-on-click-node="false"
                @node-click="handleNodeClick"
              >
                <span class="custom-tree-node1" slot-scope="{ node, data }">
                  <span class="el-tree-node__label hh">{{ node.label }}</span>
                  <span class="operation1" v-show="data.id == operationVis">
                    <el-button
                      type="primary"
                      plain
                      icon="el-icon-plus"
                      size="mini"
                      @click="handle(0)"
                      >新建</el-button
                    >
                    <el-button plain size="mini" @click="handle(1)"
                      >修改</el-button
                    >
                    <el-button plain size="mini" @click="handleDelete()"
                      >删除</el-button
                    >
                  </span>
                </span>
              </el-tree>
            </div>
          </div>
        </div>
      </div>
      <!-- 新建弹窗 -->
      <el-dialog
        :close-on-click-modal="false"
        :title="title"
        :visible.sync="newVis"
        width="400px"
        append-to-body
      >
        <el-form ref="form" :model="form" :rules="rule" label-width="120px">
          <el-form-item label="父节点:" prop="parentId" v-if="!isfirst">
            <treeselect
              v-model="form.parentId"
              :multiple="false"
              :options="resourceData.data"
              :props="fullProps"
              placeholder="请选择"
              :normalizer="normalizer"
              :disabled="isEdit ? false : true"
            />
          </el-form-item>
          <el-form-item label="资源分组名称:" prop="name">
            <el-input v-model="form.name" placeholder="请输入" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            size="mini"
            @click="createGroup()"
            v-if="isEdit ? false : true"
            >确 定</el-button
          >
          <el-button type="primary" size="mini" @click="editGroup()" v-else
            >修 改</el-button
          >
          <el-button @click="cancel()" size="mini">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "groupTree",
  components: { Treeselect },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
        value: "id",
      },
      fullProps: {
        children: "children",
        label: "fullname",
        value: "id",
      },
      resourceData: {
        code: 200,
        message: "SUCCESS",
        data: [
          {
            id: "c21d02ec204c3d9f9591a45a67f58195",
            name: "在用资源",
            parentId: "",
            children: [
              {
                id: "5cbf0e4bf6c455f2b90f26dccc7f2c7c",
                name: "测试组1",
                parentId: "c21d02ec204c3d9f9591a45a67f58195",
                children: [
                  {
                    id: "af5c690fb122371074db20eb19e474b2",
                    name: "测试组1.3",
                    parentId: "5cbf0e4bf6c455f2b90f26dccc7f2c7c",
                    children: [
                      {
                        id: "e5268c1b5f6fb09152739fc07cfc2a4b",
                        name: "测试组1.4",
                        parentId: "af5c690fb122371074db20eb19e474b2",
                        children: [
                          {
                            id: "a02b0e65def409e6b217c01f54e5732a",
                            name: "测试组1.5",
                            parentId: "e5268c1b5f6fb09152739fc07cfc2a4b",
                            children: [],
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
              {
                id: "88f69770e9d94e32d81ea49eb2bf05e8",
                name: "测试组2",
                parentId: "c21d02ec204c3d9f9591a45a67f58195",
                children: [],
              },
              {
                id: "294c01cd26f41cb54dd75c0098335b5b",
                name: "317平台",
                parentId: "c21d02ec204c3d9f9591a45a67f58195",
                children: [
                  {
                    id: "936fba4555abad9872803d90a5304fdc",
                    name: "烽火",
                    parentId: "294c01cd26f41cb54dd75c0098335b5b",
                    children: [
                      {
                        id: "4a5d79d291fc74e495d6ee7129fa213e",
                        name: "涉访专项",
                        parentId: "936fba4555abad9872803d90a5304fdc",
                        children: [],
                      },
                    ],
                  },
                ],
              },
              {
                id: "cb6cd8a969c41698e00f7c6a9ad36d38",
                name: "zB系统",
                parentId: "c21d02ec204c3d9f9591a45a67f58195",
                children: [],
              },
            ],
          },
          {
            id: "eaced9ffb820418cbe98691c781c6baa",
            name: "空闲资源",
            parentId: "",
            children: [],
          },
        ],
        success: true,
      },
      treeGroup: [],
      // -------------三---------------
      title: "", // 弹框标题-新建/编辑
      newVis: false, // 控制弹框显示
      form: {}, //弹框表格
      isfirst: false, // 是否是新建一级节点-控制父节点显示
      isEdit: false, // 编辑-删除
      rule: {
        name: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "资源分组名称长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
      },
      operationVis: "", // 控制操作栏展示与隐藏
    };
  },
  created() {},
  methods: {
    // 新建-编辑弹框控制函数
    handle1() {
      this.newVis = true;
      this.title = "新建资源分组";
      this.isfirst = true;
      this.form = {
        name: "",
      };
    },
    // 树节点击函数
    handleNodeClick(data) {
      if (data.id !== "eaced9ffb820418cbe98691c781c6baa") {
        this.operationVis = data.id;
      } else {
        this.operationVis = -1;
      }
      this.$refs.tree.setCheckedKeys([data.id]);
      // this.$refs.tree.setCheckedNodes(data);
      console.log("点击选中节点：", data.name);
      console.log("checkedkey", this.$refs.tree.getCheckedKeys());
    },
    // 新建-修改弹框
    handle(isEdit) {
      this.isfirst = false;
      this.isEdit = isEdit;
      if (isEdit) {
        this.title = "修改资源分组";
        this.newVis = true;
        // 修改资源-修改当前节点，回显其父节点
        // console.log("current", this.$refs.tree.getCurrentNode());
        console.log("checked", this.$refs.tree.getCheckedNodes());
        console.log("checkedkey", this.$refs.tree.getCheckedKeys());
        // console.log("currentNodeId", his.$refs.tree.getCheckedKeys()[0]);
        this.form = {
          parentId: this.$refs.tree.getCheckedNodes()[0].parentId
            ? this.$refs.tree.getCheckedNodes()[0].parentId
            : null,
          name: this.$refs.tree.getCheckedNodes()[0].name,
        };
      } else {
        this.newVis = true;
        this.title = "新建资源分组";
        // 新增资源-在选中节点下添加
        // console.log(this.$refs.tree.getCurrentKey(), "current");
        console.log(this.$refs.tree.getCheckedKeys(), "checked");
        this.form = {
          parentId: this.$refs.tree.getCheckedKeys()[0], // 选中的节点（可能是父节点）
          name: "",
        };
      }
    },
    // 格式化节点
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
    createGroup() {},
    editGroup() {},
    cancel() {
      this.newVis = false;
      this.deleteVis = false;
    },
    handleDelet() {},
  },
};
</script>

<style lang="scss" rel="stylesheet/scss"  scoped>
.tree {
}
//-------------1.修改节点input框样式----------
.el-tree ::v-deep .el-tree-node .el-tree-node__content {
  width: 200px;
  height: 40px;
  background: rgb(255, 255, 255);
  margin: 5px 40px 0px 8px;
  color: #666666;
  font-size: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding-left: 4px !important;
}
// 节点和子节点的tab间距
.tree ::v-deep .el-tree-node {
  position: relative;
  padding-left: 46px;
}
// 选中之后的颜色变化
.el-tree ::v-deep .is-current > .el-tree-node__content {
  border: 2px solid #2181f5;
}

// ----------2.添加分层图标和样式--------
.custom-tree-node1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  // padding-left: 8px;
  padding-top: 7px;
}
// 一级节点图标
.el-tree ::v-deep .el-tree-node__content .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/1.png") no-repeat 0 3px;
}
// 颜色装饰
.el-tree ::v-deep .el-tree-node__content:before {
  content: "";
  min-width: 3px !important;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #103289;
}
// 二级节点
.el-tree ::v-deep .el-tree-node__children .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/2.png") no-repeat 0 3px;
}
.el-tree ::v-deep .el-tree-node__children .el-tree-node__content:before {
  content: "";
  width: 3px;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #506cfe;
}
// 三级节点
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/3.png") no-repeat 0 3px;
}
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content:before {
  content: "";
  width: 3px;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #2181f5;
}
// 四级节点
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/4.png") no-repeat 0 3px;
}
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content:before {
  content: "";
  width: 3px;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #00b9ff;
}
// 五级节点
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/5.png") no-repeat 0 3px;
}
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content:before {
  content: "";
  width: 3px;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #fe9c50;
}
// 调整文字label高度
.hh {
  background: #fe9c50;
  content: "";
  display: block;
  width: 3px;
  height: 26px;
  background-size: 16px;
  margin-right: 10px;
}

.operation1 {
  margin-left: 150px;
  padding-bottom: 7px;
}
</style>

小白Rachel
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue+elementui实现input框组成的tree
uncle_Huang的博客
01-12 1076
首先，想要实现下图的效果，根结点不能删除，只能增加子孙结点，子孙结点由两个输入框，分别输入属性名和属性值，子孙结点可以添加和删除。 在网上找了很久都没找着，只能自己写了。。。。。。有需要的拿走不谢~ demo.vue <template> <div> <el-tree class="tree-class" :data="data" show-checkbox node-key="id" default-ex
Element-ui el-tree新增和删除节点后如何刷新tree的实例
01-21
一, 当新增节点后刷新当前节点 node.loaded = false; node.expand(); //新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的的展开事件， 二, 删除节点 node.parent.loaded = false node.parent.expand() 完毕~ 补充知识：element-ui组件el-tree添加按钮管用，删除按钮，数据会变，但是页面不更新 可能是element-ui 的版本太低了 我用的element-ui 2.4.6 后来发现2.4.11的是管用的 所有更新element-ui版本 cnpm i eleme
el-input和el-tree，el-popover结合的树形结构选择框
s_9527_s的博客
06-14 1913
el-input和el-tree，el-popover结合的树形结构选择框
element-ui ＜el-input＞ +＜el-tree＞使用
计算机辅助工程
08-30 1820
<template> <!-- 需求:通过点击<el-input> 将<el-tree>树型结构打开，选中<el-tree>某个值显示在<el-input>里面(中文)，点击搜索将<el-input>的值传给后台，后台需要中文对应的id;前端显示中文，后台传入Number --> <div class="demo"> <el-input placeholder="前端显示中文
【 elementUI---Tree树形控件 】---懒加载自定义子节点
tomtomgogo的博客
01-18 946
如果是第二层及以上，则需要携带参数发送请求（根据传参数不同，这里是获取点击的数据中的cid作为参数发送请求）在项目中，通常面临这样的需求：一级菜单点击后会出现二级菜单，并且点击一级菜单发送的请求返回的数据是二级菜单内容。如果返回的数据已经是层级数据，不需要每点击一次渲染下一级子菜单，则只需要使用基础用法稍加修改即可。childNodes：这里是当前节点数据，有5个代表这一层目录有条目录渲染。：是一个回调函数resolve（data），里面需要传入参数data，作为下一级菜单数据。label：节点名称。
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
10-14
主要介绍了Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）的方法，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）...
weixin_39968266的博客
12-19 689
这篇博客主要介绍树形控件的两个小小的功能：下拉菜单输入过滤框以CSS样式为主，也会涉及到Vue组件和element组件的使用。对于没有层级的数据，我们可以使用表格或卡片来展示。要展示或建立层级关系，就一定会用到树形组件了。使用Vue + Element UI，构建出最基本的树如下图所示：现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。下拉菜单将下拉菜单嵌到树节点中，使操作更加简便、...
elementUI树结构Tree修改/编辑原节点变为input输入框
DDD4V的博客
05-24 5530
思路分析 点击修改，节点由span变input，input中显示的内容为原节点内容，并获得焦点全选 修改后，失去焦点，由input变回span,节点内容修改 <h4>那这样我们需要一个数据内容来控制input和span切换的值</h4> 数据内容 . 在接口返回的数据中，添加showInput字段，来控制什么时间切换节点标签 Html结构 <el-tree class="tree" :data="t
el-tree嵌套el-input
qq_66390045的博客
11-11 1371
在el-tree的二级节点里面嵌套一个input并动态绑定每一个input数据
vue中的Input输入框里面插入tree树
口袋的天空的博客
04-18 1487
使用的是vue-treeselect一个多选组件，具有对 Vue.js嵌套选项支持. 支持嵌套选项的单选和多选 模糊匹配 异步搜索 延迟加载（仅在需要时加载深度选项的数据） 一.安装 npm install --save @riophae/vue-treeselect 或者引入： <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js">
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
好看的树样式tree
08-18
js可折叠树样式，用于显示分组列表，使用js简单的封装，方便使用
el-tree==＞添加分级图标==＞添加引导线样式==＞点击节点展示全部父节点信息==＞使用$store封装全局组件
06-20
适用博客的资源： 【Vue项目实战7】【ElementUI样式优化】el-tree==＞添加分级图标==＞添加引导线样式==＞【node-click】点击节点展示全部父节点信息==＞使用$store封装全局组件使用
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
wl-tree-table:a tree table based on vue and element-ui，一个基于vue和element-ui的树形表格
05-11
el-tree-table组件基于vue和element-ui，在 的实现基础上增加一些新特性。 并在此声明treetable的业务实现再来上述开源项目，如有冒犯，请及时联系。 共同依据element-ui的写成。 扩展主要包括：显示边框、固定高度...
tree-transfer：一个基于vue和element-ui的树形穿梭框及邮件通讯录。一种基于Vue和element-ui的树形穿梭箱组件。 Vuecli3版本见https：github.comhql7wl-tree-transfer示例见->
02-06
el-tree-fransfer是一个基于VUE和element-ui的树形穿梭框组件，使用前请确认已经发布 ！此组件功能组件element-ui的组件，但是里面的数据是树形结构！，， el-tree-transfer依赖的element-ui组件分别是， ，和最主要...
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 312
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 474
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
xu_duo_i的博客
04-25 392
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue， 后使用element-ui --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <!-- 引入element 的组件库--> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </div> </body> </html>为什么没样式
07-10
您的代码中引入了Element UI的样式文件和组件库，但是没有使用Vue实例来渲染页面。Element UI是基于Vue的组件库，需要结合Vue来使用。 您可以在Vue实例中添加el属性，并将其指向一个DOM元素，例如`<div id="app">`，然后在Vue实例中引入Element UI的组件，这样才能正确地渲染样式。 以下是修复后的代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入 element-ui 的样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue，再使用element-ui --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <!-- 引入element的组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </div> <script> new Vue({ el: '#app', }); </script> </body> </html> ``` 通过将代码放入Vue实例中，可以正确地渲染Element UI的样式和组件，以及绑定相应的事件和逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小白Rachel

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值