使用ElementUI树形控件el-tree实现复杂读写操作

最新推荐文章于 2024-04-28 16:06:00 发布
最新推荐文章于 2024-04-28 16:06:00 发布
阅读量1.8k 收藏 2
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34485368/article/details/119863540
版权

需求 动态数据遍历tree
– 只有叶子节点展示复选框
– 非叶子节点通过字段动态展示特别提醒按钮/建议按钮
点击按钮显示特别提醒/建议内容
– 读操作
叶子节点展示历史催记数据
叶子节点 提供可折叠/展示历史催记数据按钮
– 写操作
叶子节点勾选后展示文本框编辑当前催记

实现效果：

写催记效果
在这里插入图片描述
读催记效果
在这里插入图片描述
代码如下：
页面

<template>
  <!-- 
  需求 动态数据遍历tree
  --只有叶子节点展示复选框
  --非叶子节点通过字段动态展示特别提醒按钮/建议按钮
    点击按钮显示特别提醒/建议内容
 --读操作
   叶子节点展示历史催记数据
   叶子节点 提供可折叠/展示历史催记数据按钮
  --写操作
  叶子节点勾选后展示文本框编辑当前催记 
 -->

  <div id="app">
    <div style="text-align: right">
      <el-switch v-model="isWrite" active-text="写催记" inactive-text="读催记">
      </el-switch>
    </div>
    <el-tree
      :data.sync="treeData"
      :show-checkbox="isWrite"
      node-key="id"
      :expand-on-click-node="false"
      default-expand-all
      :props="defaultProps"
      @check="boxCheck"
    >
    <!-- 显示催记历史按钮快捷键 -->
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span @click="() => nodeClick(data, node)">{{ node.label }}</span>
        <span>
          <el-button
            v-popover="'popover-0-' + data.$treeNodeId"
            type="text"
            size="mini"
          >
            <span class="btnRemarkNum">
              {{ getHistorData(data).remarkList.length }}</span
            >
          </el-button>
          <el-popover
            :ref="'popover-0-' + data.$treeNodeId"
            placement="right"
            :title="node.label"
            width="200"
            trigger="click"
          >
            <div class="box">
              <div
                v-for="(item, index) in getHistorData(data).remarkList"
                :key="index"
                class="mark"
                style="margin-bottom: 10px"
              >
                <span style="display: inline-block; padding-bottom: 3px"
                  ><i
                    class="el-icon-time"
                    style="color: #409eff; font-weight: 500; padding: 0 5px"
                  ></i
                  >{{ item.createDatetime }}</span
                >
                <span style="display: inline-block"
                  ><i
                    class="el-icon-wallet"
                    style="color: #409eff; font-weight: 500; padding: 0 5px"
                  ></i
                  >{{ item.remark }}</span
                >
              </div>
            </div>
          </el-popover>
        </span>
        <!-- //特别提醒 -->
        <span class="treeItemBtn" v-if="data.enableSpecialRemind == 'Y'">
          <el-button
            v-popover="'popover-1-' + data.$treeNodeId"
            type="text"
            size="mini"
          >
            <span>特别提醒</span>
          </el-button>
          <el-popover
            :ref="'popover-1-' + data.$treeNodeId"
            placement="right"
            :title="node.label"
            width="200"
            trigger="click"
            :content="data.speechSuggestionContent"
          >
          </el-popover>
        </span>
        <!-- //话术建议 -->
        <span class="treeItemBtn" v-if="data.enableSpeechSuggestion == 'Y'">
          <el-button
            v-popover="'popover-2-' + data.$treeNodeId"
            type="text"
            size="mini"
          >
            <span>话术建议</span>
          </el-button>
          <el-popover
            :ref="'popover-2-' + data.$treeNodeId"
            placement="right"
            :title="node.label"
            width="200"
            trigger="click"
            :content="data.specialRemindContent"
          >
          </el-popover>
        </span>
        <!-- //读 -折叠按钮 -->
        <span
          class="treeItemBtn"
          v-if="!isWrite && getHistorData(data).remarkList.length > 0"
        >
          <el-button type="text" size="mini">
            <i
              v-if="data.enableDefaultUnfold == 'N'"
              class="el-icon-circle-plus-outline"
              @click="data.enableDefaultUnfold = 'Y'"
            ></i>
            <i
              v-else
              class="el-icon-remove-outline"
              @click="data.enableDefaultUnfold = 'N'"
            ></i>
          </el-button>
        </span>
        <!-- 编辑当前催记 -->
        <div
          class="addBox"
          v-if="isWrite && data.isLeafNode == 'Y' && data.isCheck"
        >
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="data.remark"
            maxlength="40"
            show-word-limit
          >
          </el-input>
        </div>
        <!-- 催记历史展示 -->
        <div class="box" v-if="!isWrite && data.enableDefaultUnfold == 'Y'">
          <div
            v-for="(item, index) in getHistorData(data).remarkList"
            :key="index"
            class="mark"
          >
            {{ item.remark }}
          </div>
        </div>
      </span>
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowAdd: 999, //控制是否显示add的输入框
      isWrite: true, //读写催记判断
      nodeList: {}, // 用于保存节点的node信息
      getAllDefaultKeys: [], //默认展开的节点key
      nodeHistoryTreeData: {},
      defaultProps: {
        children: "children",
        label: "mapResultCodeName",
        id: "mapResultCodeId",
        specialRemindContent: "specialRemindContent",
        // disabled: function (data, node) {
        //   if (node.data.isLeafNode === "N") {
        //     return false;
        //   } else {
        //     return true;
        //   }
        // },
      },
      treeData: [
        {
          children: [
            {
              enableDefaultUnfold: "Y", //是否默认折叠
              enableSpecialRemind: "N",//是否显示特别提醒
              enableSpeechSuggestion: "N",//是否显示特别建议
              enableUnfoldButton: "N",//是否显示折叠按钮
              isLeafNode: "N", //是否为叶子节点
              mapResultCode: "00", //节点编码
              mapResultCodeId: "0",//节点编码ID(唯一)
              mapResultCodeName: "地图结代名称0", //节点名称
              specialRemindContent: "特别提醒0",//特别建议内容
              speechSuggestionContent: "话术建议0",//特别提醒内容
              children: [
                {
                  enableDefaultUnfold: "N",
                  enableSpecialRemind: "N",
                  enableSpeechSuggestion: "N",
                  enableUnfoldButton: "N",
                  isLeafNode: "Y",
                  isCheck: "", //是否选择
                  mapResultCode: "00",
                  mapResultCodeId: "0",
                  mapResultCodeName: "地图结代名称0",
                  specialRemindContent: "特别提醒0",
                  speechSuggestionContent: "话术建议0",
                },
                {
                  enableDefaultUnfold: "N",
                  enableSpecialRemind: "N",
                  enableSpeechSuggestion: "N",
                  enableUnfoldButton: "N",
                  isLeafNode: "Y",
                  isCheck: "",
                  mapResultCode: "00",
                  mapResultCodeId: "0",
                  mapResultCodeName: "地图结代名称0",
                  specialRemindContent: "特别提醒0",
                  speechSuggestionContent: "话术建议0",
                },
                {
                  enableDefaultUnfold: "Y",
                  enableSpecialRemind: "N",
                  enableSpeechSuggestion: "N",
                  enableUnfoldButton: "N",
                  isLeafNode: "Y",
                  isCheck: "",
                  mapResultCode: "00",
                  mapResultCodeId: "0",
                  mapResultCodeName: "地图结代名称0",
                  specialRemindContent: "特别提醒0",
                  speechSuggestionContent: "话术建议0",
                },
              ],
            },
            {
              enableDefaultUnfold: "Y",
              enableSpecialRemind: "N",
              enableSpeechSuggestion: "N",
              enableUnfoldButton: "N",
              isLeafNode: "Y",
              isCheck: "",
              mapResultCode: "00",
              mapResultCodeId: "0",
              mapResultCodeName: "地图结代名称0",
              specialRemindContent: "特别提醒0",
              speechSuggestionContent: "话术建议0",
            },
            {
              enableDefaultUnfold: "Y",
              enableSpecialRemind: "N",
              enableSpeechSuggestion: "N",
              enableUnfoldButton: "N",
              isLeafNode: "N",
              mapResultCode: "00",
              mapResultCodeId: "0",
              mapResultCodeName: "地图结代名称0",
              specialRemindContent: "特别提醒0",
              speechSuggestionContent: "话术建议0",
              children: [
                {
                  enableDefaultUnfold: "Y",
                  enableSpecialRemind: "N",
                  enableSpeechSuggestion: "N",
                  enableUnfoldButton: "N",
                  isLeafNode: "Y",
                  isCheck: "",
                  mapResultCode: "00",
                  mapResultCodeId: "0",
                  mapResultCodeName: "地图结代名称0",
                  specialRemindContent: "特别提醒0",
                  speechSuggestionContent: "话术建议0",
                },
                {
                  enableDefaultUnfold: "Y",
                  enableSpecialRemind: "N",
                  enableSpeechSuggestion: "N",
                  enableUnfoldButton: "N",
                  isLeafNode: "Y",
                  isCheck: "",
                  mapResultCode: "00",
                  mapResultCodeId: "0",
                  mapResultCodeName: "地图结代名称0",
                  specialRemindContent: "特别提醒0",
                  speechSuggestionContent: "话术建议0",
                },
                {
                  enableDefaultUnfold: "Y",
                  enableSpecialRemind: "N",
                  enableSpeechSuggestion: "N",
                  enableUnfoldButton: "N",
                  isLeafNode: "Y",
                  isCheck: "",
                  mapResultCode: "00",
                  mapResultCodeId: "0",
                  mapResultCodeName: "地图结代名称0",
                  specialRemindContent: "特别提醒0",
                  speechSuggestionContent: "话术建议0",
                },
              ],
            },
          ],
          enableDefaultUnfold: "Y",
          enableSpecialRemind: "Y",
          enableSpeechSuggestion: "Y",
          enableUnfoldButton: "N",
          isLeafNode: "N",
          mapResultCode: "00",
          mapResultCodeId: "0",
          mapResultCodeName: "地图结代名称0",
          specialRemindContent: "特别提醒0",
          speechSuggestionContent: "话术建议0",
          remark: "",
        },
      ],
      historyTreeData: [
        {
          mapResultCode: "00",
          mapResultCodeId: "0",
          mapResultCodeName: "地图结代名称0",
          remarkList: [
            { createDatetime: 1627973533033, remark: "这是一条催记注释0" },
            { createDatetime: 1627973533033, remark: "这是一条催记注释0" },
            { createDatetime: 1627973533033, remark: "这是一条催记注释0" },
          ],
        },
        {
          mapResultCode: "01",
          mapResultCodeId: "1",
          mapResultCodeName: "地图结代名称1",
          remarkList: [
            { createDatetime: 1627973533033, remark: "这是一条催记注释1" },
            { createDatetime: 1627973533033, remark: "这是一条催记注释1" },
            { createDatetime: 1627973533033, remark: "这是一条催记注释1" },
          ],
        },
        {
          mapResultCode: "02",
          mapResultCodeId: "2",
          mapResultCodeName: "地图结代名称2",
          remarkList: [
            { createDatetime: 1627973533033, remark: "这是一条催记注释2" },
            { createDatetime: 1627973533033, remark: "这是一条催记注释2" },
            { createDatetime: 1627973533033, remark: "这是一条催记注释2" },
          ],
        },
      ],
    };
  },
  created() {
  },
  methods: {
    // 复选框勾选事件
    boxCheck(checkedNodes, checkedKeys) {
      let list = checkedKeys.checkedNodes.filter((item) => {
        if (checkedNodes.$treeNodeId == item.$treeNodeId) return item;
      });
      //复选框选中状态
      if (list && list.length > 0) {
        this.isShowAdd = checkedNodes.$treeNodeId;
        checkedNodes.isCheck = true;
      } else {
        checkedNodes.isCheck = false;
      }
    },
    //获取历史催记数据
    getHistorData(data) {
      let list = this.historyTreeData.filter((item) => {
        if (data.mapResultCodeId == item.mapResultCodeId) {
          return item;
        }
      });
      if (list.length == 1) {
        return list[0];
      }
      return null;
    },
  },
};
</script>
<style lang="less">
//设置只有叶节点显示复选框
.el-tree-node {
  margin-bottom: 10px;
  .is-leaf + .el-checkbox .el-checkbox__inner {
    display: inline-block;
  }
  .el-checkbox__input > .el-checkbox__inner {
    display: none;
  }
}
.el-tree-node__content {
  // height:100% !important;
  height: auto !important; //去掉默认高度
  align-items: flex-start !important; //图标显示上面
  margin-bottom: 10px;
}

.btnRemarkNum {
  display: inline-block;
  padding: 1px 8px;
  background-color: #409eff;
  color: white;
  border-radius: 8px;
}
//节点按钮
.treeItemBtn {
  margin-left: 20px;
  .el-button--text {
    color: #10e29d;
  }
}
</style>
前端.木子李
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-tree和 el-table实现穿梭复制功能
weixin_45979310的博客
01-13 375
<template> <div class="signalPop"> <div class="content"> <div class="left"> <div class="top"> <el-input v-model="inputValue" class="inp" @keyup.enter.native="signalControl" placeholder="请输入关键.
el-tree懒加载前端实现动态变化
WR3nch的博客
01-26 582
这里区分了node.level是因为后端给的树第一层的接口和第二层不一样，可以根据项目情况自己灵活修改区分层级懒加载接口，最后呈现的数据都会reslove()方法回显出来。新项目需求：开发一个实时视频页面，左侧为视频播放部分，右侧为视频列表树，双击列表树的设备播放视频，并且判断播放状态回显到列表树上。这里通过递归遍历找到自己需要改变的节点数据，可以在遍历时调接口或者其他操作都可以，如果想改变节点数据可以判断节点level或者节点id再reslove()出来。)，所以只能用前端方法来实现列表树的播放状态。
el-tree-v2虚拟滚动树，实现代码勾选、动态禁用勾选、检索、节点文字label宽度超出滚动等功能
最新发布
nlhhln的博客
04-28 1243
某个需求要展示大量树节点，原本使用普通el-tree，默认不要展开太多层次（注意树节点默认全部展开页面渲染很卡），勉强能应付，但是检索功能会展开所有节点，还是很卡顿，只能硬着头皮改版，就想到了用element-plus的虚拟滚动树。查了网上没有多少el-tree-v2的使用文章，下面是自己的踩坑过程，给有需要的人提供些帮助。
elementui el-tree 获得选中节点id
weixin_55648290的博客
01-13 2760
elementui el-tree 获得选中节点id
element-ui中el-tree树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...
weixin_34068198的博客
12-12 1万+
在element-ui的el-tree树形控件中默认获取选取当前选中id的方法是this.$refs.tree.getCheckedKeys();但是如果子节点不是全部选中的话，父节点算不选中。由于我们一般想要的是就算只选中一个直接点父节点以及其父辈都算选中，所以需要自己写逻辑。 <!DOCTYPE html> <htm...
el-tree多选获取选中的节点ID
许粤军的博客
01-27 2332
需求：可以筛选并获取当前树结构中选中的用户ID 代码： <el-input v-model="filterText" placeholder="输入关键字进行过滤" /> <el-tree ref="tree" :data="userTree" show-checkbox node-key="id" :filter-node-method="filterNode" highlight-current :props="defaultProps" @.
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
11-19
需求： vue-cli项目树形控件：一级节点为本地节点，默认展开一级节点，增删改后局部刷新数据。 增加节点，点击确定后局部刷新，渲染新数据。 源码 element组件样式 <el-tree class="treeitems" :data="data...
elementUI Tree 树形控件的官方使用文档
10-17
ElementUI Tree 树形控件是前端开发中常用的一种组件，它用于展示具有层次结构的数据，通常被用来表示目录、组织架构或者有嵌套关系的信息。这个组件允许用户展开或折叠节点，以便更好地管理和查看数据。在本文中，...
vue elementUI tree树形控件获取父节点ID的实例
10-18
今天小编就为大家分享一篇vue elementUI tree树形控件获取父节点ID的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ElementUI Tree 树形控件的使用并给节点添加图标
10-15
在本文中，我们将深入探讨如何在Vue项目中利用ElementUI库的Tree组件来创建树形结构，并且重点讲解如何为树形结构的各个节点添加图标。 ElementUI的Tree组件是一个强大的工具，它允许开发者以树状结构展示数据，...
element-ui源码分析：剖析el-tree源码，看看实现一个树组件有多么复杂（1）
发果叁
09-24 3092
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
获取Tree 树形控件下面的全部id
guapilixianghe的博客
04-20 1682
这样就可以获取到所有的id了，当然如果tree树的id，默认是id那就不用管，如果id是别的如appId等，可以通过绑定的数据来修改。就是存放获取到全部id的数组。把图三中对应的东西也改一下，
vue el-tree将选中的节点以tree结构形式数组返回
qq_41038412的博客
12-25 2203
templete: <div> <el-tree :data="data" show-checkbox node-key="label" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps" ref="tree" > </el-tree> <b
ztree根据ID获取节点node并修改其属性
热门推荐
群来群往的博客
10-19 1万+
0.页面中准备树的ul &lt;ul id="treeDemo10" class="ztree" style="display: none;"&gt;&lt;/ul&gt;  1.生成部门树的JS // 查询外部部门结构 var searchUnitTree = function() { $.ajax({ url : contextPath + '/exam_...
获取树节点的id：
L-BAKE
09-28 1274
<br />获取树节点的id：<br />currentNode.getRecord().getValue(“category_id”)获取分类的id号
关于element-tree，解决id相同如何回显，同样的id只能选中一个的坑！！！！
wlq104的博客
02-08 3776
element-tree一个人在不同部门下，存在相同id的情况
element-ui中树状图el-tree的使用（vue2）
小雪的博客
03-26 1284
树状图el-tree直接cv就ok
element获取tree当前节点id和所有父级节点id
sdad2154的博客
12-18 1780
<el-tree ref="allparntId" empty-text="暂无数据" :props="organizationProps" :expand-on-click-node="false" @node-click="handleLeftclick" :load="loadNode" node-key="id"...
树形控件el-tree的遍历
10-10
树形控件el-tree的遍历可以使用递归的方式来实现。以下是一个示例代码： ```javascript function traverseTree(node) { console.log(node.label); // 遍历到的节点，这里只是打印了节点的 label 属性，可以根据...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值