原生html vue3使用element plus 的树tree上移下移案例源码

已于 2024-03-20 09:28:27 修改
阅读量618 收藏 9
点赞数 9
文章标签： html vue.js elementui vue3
于 2024-03-19 10:30:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LlanyW/article/details/136834539
版权

上效果 

 

本树做一些限制，只能同级上下移。子级添加只能最大2级，限制判断用allow-drop事件

:allow-drop="allowDrop"

  if (type == 'inner') return false //只能同级拖拽
        if (draggingNode.level > categoryInfo.maxLevel) return false

html源码

<!DOCTYPE html>
<html lang="en">
<!--
* @Name: mallSalesReports.html
* @Description:
* @Author Lani
* @date 2024-02-28 18:32:36
-->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品类别</title>
  <script src="../js/vue3.3.8/vue.global.js"></script>
  <script src="../js/elementPlus/index.full.js"></script>
  <link rel="stylesheet" href="../js/elementPlus/index.css">
  <style>
    .el-header {
      height: 88px;
      background-color: #fff;
      z-index: 2;
    }

    #main-body .el-main {
      padding: 0;
      z-index: 1;
    }

    .el-aside {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .el-tree .el-tree-node__content {
      height: 50px !important;
      border-top: 1px solid #aaa;
    }

    .tree {
      border-bottom: 1px solid #aaa;
      border-left: 1px solid #aaa;
      border-right: 1px solid #aaa;
      /*width: 600px;*/
    }

    .custom-tree-node1 {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding: 8px;
      height: 50px;
    }


  </style>
</head>
<body>
<div id="app" class="common-layout" v-cloak>
  <el-affix :offset="0">
    <el-row :gutter="0" style="border-bottom: 0px solid #d0d0d0;margin:0 20px;padding: 15px 0;background-color: #fff;">
      <el-col :span="22">
        <div class="flex-r">
          <h4 class="menu-title-color fw7 fz22">商品销售报表</h4>
        </div>
      </el-col>
      <el-col :span="2" style="text-align: end">
        <el-button type="primary" size="large" @click="handleAddTopLevelNode">新增一级目录</el-button>
      </el-col>
    </el-row>
  </el-affix>
  <el-container>
    <el-main id="main-body">
      <el-tree
        ref="menutree"
        :allow-drop="allowDrop" :allow-drag="allowDrag"
        :data="treeData" draggable
        :expand-on-click-node="false"
        default-expand-all node-key="id"
        class="tree">
        <template #default="{ node, data }">
          <div class="custom-tree-node1">
            <div>
              <el-input v-if="data.isEdit" v-model="data.DICT_VALUE" maxlength="12" show-word-limit></el-input>
              <el-text v-else="!node.isEdit">{{ data.DICT_VALUE }}</el-text>
            </div>
            <div style="margin-left: 40px;">
              <el-button type="text" size="small" v-if="data.up"
                         @click="handleMoveUp(node, data, 'up')">上移<i class="el-icon-top"></i></el-button>
              <el-button
                type="text" size="small" v-if="data.down"
                @click="handleMoveDown(node, data, 'down')">下移
                <i class="el-icon-bottom"></i></el-button>
              <el-button @click="append(node,data)" type="primary" v-if="data.subNode"> 添加子级</el-button>
              <el-button style="margin-left: 18px" @click="edit(node, data)">
                {{ data.operateBtnText }}
              </el-button>
              <el-button style="margin-left: 18px" @click="remove(node, data)" v-if="data.delete"> 删除</el-button>
            </div>
          </div>
        </template>
      </el-tree>
    </el-main>
  </el-container>
</div>
</body>
<script type="module">
  import zhCn from "../js/elementPlus/locale/zh-cn.mjs";

  const {createApp, ref, reactive, watch, toRaw, toRefs, shallowRef} = Vue
  const _app = createApp({
    setup() {
      const categoryInfo = reactive({
          maxLevel: 2,//类别层级最大2
          treeData: [
            { //默认保留第一个节点数不能为空
              label: '全部商品',
              DICT_VALUE: '全部商品',
              up: false, down: true, subNode: true, delete: false, operateBtnText: '修改',
              id: 1,
              children: [
                {
                  label: 'Level two 1-1',
                  DICT_VALUE: 'Level two 1-1',
                  id: 2,
                  up: false, down: true, subNode: true, delete: true, operateBtnText: '修改',
                },
              ],
            },
            { //默认保留第一个节点数不能为空
              label: '花吃了那女孩',
              DICT_VALUE: '花吃了那女孩',
              up: false, down: true, subNode: true, delete: false, operateBtnText: '修改',
              id: 1,
              children: [
                {
                  label: 'Level two 1-1',
                  DICT_VALUE: 'Level two 1-1',
                  id: 2,
                  up: false, down: true, subNode: true, delete: true, operateBtnText: '修改',
                },
              ],
            },
          ],
          id: 1
        }
      )

      const payStatus = ref('')
      const num = ref(20)
      const timer = ref(null);
      const clickCount = ref(0);
      const locale = ref('')
      const searchKeywords = ref('')

      /*
      * 判断结点拖拽
      * */
      const allowDrop = (draggingNode, dropNode, type) => {
        // console.log('|--正在拖拽draggingNode,type', draggingNode, type)
        // console.log('|--dropNode', dropNode)
        if (type == 'inner') return false //只能同级拖拽
        if (draggingNode.level > categoryInfo.maxLevel) return false
        return true//允许拖拽
      }
      const allowDrag = (draggingNode) => {
        return !draggingNode.data.label.includes('Level three 3-1-1')
      }

      const toast = (message, type = 'warning', fn = null) => {
        ElementPlus.ElMessage({
          message,
          type, fn
        })
      }
      /*
      * 插入：$refs.menutree.insertBefore
      * 删除：$refs.menutree.remove
      * */
      const handleMoveUp = (node) => {  // 上移的原理就是现在选中节点上方复制一个一模一样的节点，然后删掉原来那个
        const {$treeNodeId, ...newData} = node.data
        console.log('|--选中结点', node.data, vm.$refs.menutree, $treeNodeId, newData, node.previousSibling.data.$treeNodeId)
        if (vm.$refs.menutree) vm.$refs.menutree.insertBefore(newData, node.previousSibling)
        // if (vm.$refs.menutree) vm.$refs.menutree.insertBefore(newData, node.previousSibling.data.$treeNodeId)
        if (vm.$refs.menutree) vm.$refs.menutree.remove(node)
        saveCategoryRequest()
      }
      const handleMoveDown = (node) => {  // 下移的原理就是现在选中节点下方复制一个一模一样的节点，然后删掉原来那个
        const {$treeNodeId, ...newData} = node.data
        if (vm.$refs.menutree) vm.$refs.menutree.insertAfter(newData, node.nextSibling)
        // if (vm.$refs.menutree) vm.$refs.menutree.insertAfter(newData, node.nextSibling.data.$treeNodeId)
        if (vm.$refs.menutree) vm.$refs.menutree.remove(node)
        saveCategoryRequest()
      }
      /*
      * node: 当前节点，
      * data: 当前节点
      * */
      const append = (node, data) => {//给当前节点，添加一个子节点
        console.log('|--添加', node, data)
        if (node.level >= categoryInfo.maxLevel) {
          toast(`级别最大只能为${categoryInfo.maxLevel}`)
          return
        }
        categoryInfo.id = categoryInfo.id + 1

        const newChild = {
          label: '二级类别 ',
          id: categoryInfo.id,

          children: [],
          up: data.children.length > 0 ? true : false,
          down: false,
          subNode: false,
          delete: true,
          isEdit: true,
          operateBtnText: '保存',
          /*API字段*/
          "DICT_SEQ": 0,
          DICT_VALUE: '二级类别 ',
        }
        if (!data.children) {
          data.children = []
        }
        data.children.push(newChild)
        data.items = JSON.parse(JSON.stringify(data.children))
        if (data.children.length > 1) {
          data.children[data.children.length - 2].down = true
        }
      }
      const handleAddTopLevelNode = () => { //添加一级类别
        categoryInfo.id = categoryInfo.id + 1
        let newTopLevelNode = {
          id: categoryInfo.id,
          label: '一级类别 ',
          up: true, down: false, subNode: true, delete: true, isEdit: true, operateBtnText: '保存',
          children: [],

          items: [],
          "DICT_SEQ": 0,
          DICT_VALUE: '一级类别 ',
        }
        categoryInfo.treeData.push(newTopLevelNode)
        if (categoryInfo.treeData.length > 1) {
          categoryInfo.treeData[categoryInfo.treeData.length - 2].down = true
        }
      }
      /*
      * isAPI: true:用于请求掊口，删除不用字段， false 用于ui渲染增加一些字段
      * */
      const refreshTree = (data, isAPI = false) => {
        for (let i = 0; i < data.length; i++) {
          // data[i].id = data[i].DICT_SEQ
          if (isAPI && data[i]) { // 上传修改
            try {
              delete data[i].label
              delete data[i].up
              delete data[i].down
              delete data[i].subNode
              delete data[i].delete
              delete data[i].isEdit
              delete data[i].operateBtnText
              data[i].items = JSON.parse(JSON.stringify(data[i].children))  //同步items

              if ((!data[i].children) || (data[i].children.length <= 0)) continue
              data[i].items = refreshTree(data[i].items, isAPI)
              delete data[i].children
            } catch (e) {
            }
            continue
          }
          //渲染ui
          data[i].label = data[i].DICT_VALUE
          data[i].up = (i != 0)
          data[i].down = (i != (data.length - 1))
          data[i].subNode = true
          data[i].delete = true
          data[i].isEdit = false
          categoryInfo.id = categoryInfo.id + 1
          data[i].id = categoryInfo.id

          data[i].operateBtnText = '修改'
          data[i].children = []
          if ((!data[i].items) || (data[i].items.length <= 0)) continue
          data[i].children = refreshTree(data[i].items, isAPI)
          // console.log(data[i].children)
        }
        return data
      }

      const saveCategoryRequest = async () => {
        console.log('|-http 请求-')
        toast('Http请求')
      }

      return {
        ...toRefs(categoryInfo),
        num,
        locale, searchKeywords,
        clickCount, timer,
        headerCellStyle: {borderTop: '2px solid #d0d0d0', background: '#f5f5f5', color: '#333', fontWeight: 500},
        // 方法
        allowDrag, allowDrop,
        toast, append, handleMoveDown, handleMoveUp,

        //移除节点
        remove: (node, data) => {
          console.log("|--del", node, data, node.data.$treeNodeId)
          const {$treeNodeId} = node.data
          console.log('|--', $treeNodeId, vm.$refs.menutree)
          // return
          if (categoryInfo.treeData.length <= 1) {
            toast('至少保留一个结点')
            return;
          }
          if (!vm.$refs.menutree) return
          console.log('|--remove')
          // vm.$refs.menutree.remove($treeNodeId)
          vm.$refs.menutree.remove(node) //OK
          // vm.$refs.menutree.remove(data)
          saveCategoryRequest()

          /* const parent = node.parent;
           const children = parent.data.children || parent.data;
           const index = children.findIndex((d) => d.id === data.id);
           children.splice(index, 1);*/
        }, //移除节点
        edit: (node, data) => {
          let btnText = '保存'
          if (data.isEdit) {
            saveCategoryRequest()
            btnText = '修改'
          }
          data.isEdit = !data.isEdit
          data.operateBtnText = btnText
        },
        handleAddTopLevelNode,
        payStatusItemSelectedEvent: (item, index) => {
          payStatus.value = item.item
        },
         refreshTree, saveCategoryRequest,     
      }
    },
    async mounted() {
    },
  })
  _app.use(ElementPlus, {locale: zhCn})
  const vm = _app.mount('#app')
</script>


</html>

Lan.W
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Vue3和Element-plus的文章发布平台设计源码
04-08
文章发布平台 - 基于Vue3和Element-plus构建，包含39个文件，如VUE、JS、JSON、JPG、PNG、CJS、GITIGNORE、HUSKY和MD等。该系统是一个文章管理系统，使用Vue3技术栈，为用户提供了一个高效、易用的文章发布平台。
Vue3 Element-Plus Tree组件基本使用
白瑕 的博客
04-29 9691
快速呈现出简易的一个Tree组件.
vue3使用element-plus及其icon
Y_soybean_milk的博客
05-05 4621
element-plus 1、安装依赖包 npm install element-plus --save 2、在main.js中引入并注册 import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/dist/in
vue3使用element-plus搭建后台管理系统---菜单管理
搬砖狗-小强的专栏
04-11 9831
vue3使用element-plus搭建后台管理系统---菜单管理
vue3使用element-plus
热门推荐
游小北的博客
11-26 1万+
element-ui 是配合 vue2 使用，element-plus 是配置 vue3 使用的。
基于Vue3+Element Plus后台管理系统模版源码.zip
10-26
基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element ...
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
Vue3+Element Plus后台管理系统模版.zip
01-02
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
HTML静态网页成品作业(HTML+CSS+JS)——在线购物商城网页设计制作(4个页面)
weixin_42283461的博客
05-16 698
HTML静态网页成品作业(HTML+CSS+JS)——在线购物商城网页设计制作(4个页面)
HTML静态网页作业(HTML+CSS+JS)——动漫蜡笔小新网页设计制作(4个页面)
weixin_42283461的博客
05-20 292
HTML静态网页作业(HTML+CSS+JS)——动漫蜡笔小新网页设计制作(4个页面)
HTML常见标签-换行标签-水平线标签
weixin_44201223的博客
05-14 182
换行标签 水平线标签
Web开发——HTML&CSS
最新发布
一切皆是定数的博客
05-20 152
HTML：HyperText Markup Language，超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。以下就是html代码以及css样式搭配之后的显示效果。
HTML/JavaScript实现复制文本、复制HTML、复制图片功能
m0_67584973的博客
05-20 576
HTML/JavaScript实现复制文本、复制HTML、复制图片功能
超链接的魅力：HTML中的 `＜a＞` 标签全方位探索！
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 912
超链接是互联网的脉络，它不仅仅是一个技术点，更是信息流动的桥梁。今天，我们不仅学习了基础，也探索了高级技巧和最佳实践。但旅程远未结束，超链接的世界还有更多等你去发现。现在轮到你了！在你的项目中实践这些技巧，或者在评论区分享你遇到的有趣超链接应用。让我们携手，让互联网的每一个角落都充满活力与连接！你曾用超链接实现过哪些有趣的交互？或者在超链接使用过程中遇到过哪些坑？分享你的故事，让我们共同成长！🌟欢迎来到我的博客，很高兴能够在这里和您见面！
HTML常见标签-段落标签
weixin_44201223的博客
05-14 269
段落标签
HTML静态网页成品作业(HTML+CSS)——动漫大耳朵图图网页(4个页面)
weixin_42283461的博客
05-13 1036
HTML静态网页成品作业(HTML+CSS)——动漫大耳朵图图网页(4个页面)
vue3使用element-plus中Tree组件复选框禁用
06-10
要禁用 Element Plus 中 Tree 组件中的复选框，你可以使用 Tree 组件中的 `tree-node` 插槽，通过自定义节点的内容来实现。你可以在 `tree-node` 插槽中添加一个复选框，并将其禁用，实现禁用复选框的效果。 下面是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值