vue+element+axios Tree 树形控件的基本使用

最新推荐文章于 2023-09-26 19:30:37 发布
最新推荐文章于 2023-09-26 19:30:37 发布
阅读量789 收藏 1
点赞数
文章标签： css html vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tinglis/article/details/107608733
版权

vue+element+axios Tree 树形控件的基本使用

这是我前面做的页面！今天有空来记录一下！！！

一样的接口还是被我删了，需要模拟数据的可以参考 element官网: https://element.eleme.cn/#/zh-CN/component/tree#shu-jie-dian-de-xuan-ze.

如果有错误或者有问题的可以直接私信我或者直接在评论区留言！我看到的第一时间会进行纠正或者回答的！！！

直接上代码了：

<template>
  <div class="home">
    <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        @node-click="getCheckedNodes"
        @node-drag-start="handleDragStart"
        @node-drag-enter="handleDragEnter"
        @node-drag-leave="handleDragLeave"
        @node-drag-over="handleDragOver"
        @node-drag-end="handleDragEnd"
        @node-drop="handleDrop"
        draggable
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button
              v-if="c"
              type="text"
              size="mini"
              @click="() => remove(node, data)"
              icon="el-icon-delete"
            ></el-button>
          </span>
        </span>
      </el-tree>
    </el-col>
    <el-col :span="20" :offset="1">
      <el-button-group>
        <el-button size="small" type="primary" @click="a=!a,b=false">新增</el-button>
        <el-button size="small" type="primary" @click="change1">编辑</el-button>
        <el-button size="small" type="primary" @click="c=!c">删除</el-button>
      </el-button-group>
      <hr />
      <h4 v-show="a">新增</h4>
      <h4 v-show="b">编辑</h4>
      <el-form ref="form" :model="form" label-width="90px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="菜单名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所有人可见">
              <el-checkbox-group v-model="form.type">
                <el-checkbox label name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="父级菜单">
          <el-select v-model="form.menu" placeholder="请选择父级">
            <el-option label="新增一个父级菜单" value="0"></el-option>
            <span v-for="item in data" :key="item.id">
              <el-option :label="item.label" :value="item.id"></el-option>
            </span>
          </el-select>
        </el-form-item>
        <el-form-item label="路径">
          <el-input v-model="form.route"></el-input>
        </el-form-item>
        <!-- <el-form-item label="备注">
          <el-input type="textarea" v-model="form.remarks"></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </div>
</template>
<script>
import Axios from "axios";
let id = 1000;
export default {
  data() {
    return {
      suerindex: "",
      userindex: "",
      username: "",
      inttype: 0,
      type: [],
      route: "",
      remarks: "",
      menu: "",
      display: "",
      a: false,
      b: false,
      c: false,
      checked: true,
      dialogVisible: true,
      mun: 11,
      mun1: 1003,
      editObj: 0,
      editObj1: {
        id: "",
        label: "",
        menu: "",
        route: "",
        remarks: "",
        delivery: false,
        type: [],
      },
      editObj2: {
        id: "",
        label: "",
        menu: "",
        route: "",
        remarks: "",
        delivery: false,
        type: [],
        children: [],
      },
      chaObj: {
        id: "",
        label: "",
        menu: "",
        route: "",
        remarks: "",
        delivery: false,
        type: [],
        children: [],
      },
      data: [],
      // data: [
      //   {
      //     id: 1,
      //     label: "基础数据",
      //     route: "",
      //     menu: "",
      //     remarks: "",
      //     type: [],
      //     children: [
      //       {
      //         id: 2,
      //         label: "用户管理",
      //         route: "",
      //         menu: "",
      //         remarks: "",
      //         type: []
      //       },
      //       {
      //         id: 3,
      //         label: "字典管理",
      //         route: "",
      //         menu: "",
      //         remarks: "",
      //         type: []
      //       },
      //       {
      //         id: 4,
      //         label: "操作日志",
      //         menu: "",
      //         route: "",
      //         remarks: "",
      //         type: []
      //       },
      //       {
      //         id: 5,
      //         label: "授权管理",
      //         menu: "",
      //         route: "",
      //         remarks: "",
      //         type: []
      //       },
      //       {
      //         id: 6,
      //         label: "规则管理",
      //         menu: "",
      //         route: "",
      //         remarks: "",
      //         type: []
      //       }
      //     ]
      //   },
      //   {
      //     id: 7,
      //     label: "运营数据",
      //     menu: "",
      //     route: "",
      //     remarks: "",
      //     type: [],
      //     children: [
      //       {
      //         id: 1001,
      //         label: "设备管理",
      //         route: "",
      //         menu: "",
      //         remarks: "",
      //         type: []
      //       },
      //       {
      //         id: 1002,
      //         label: "定位配置",
      //         menu: "",
      //         route: "",
      //         remarks: "",
      //         type: []
      //       }
      //     ]
      //   }
      // ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      form: {
        name: "",
        menu: "",
        route: "",
        remarks: "",
        delivery: false,
        type: [],
      },
    };
  },
  created() {
    this.fuzhi();
  },
  methods: {
    fuzhi() {
      var api = "";
      Axios.get(api)
        .then((response) => {
          this.data = response.data.result;
          //console.log(this.data);
          //location. reload()
          // for(var i=0;i<response.data.result.length;i++){
          //   if(response.data.result[i].data.scope == 1){
          //     var e=""
          // }
          // this.data = {
          //     id:response.data.result[i].id,
          //     label:response.data.result[i].label,
          //     parentid:response.data.result[i].parentid,
          //     type:e,
          //     data:response.data.result[i].data,
          //   }

          // }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleDragStart(node, ev) {
      console.log("drag start", node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      console.log("tree drag enter: ", dropNode.label);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      console.log("tree drag leave: ", dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      console.log("tree drag over: ", dropNode.label);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      console.log("tree drag end: ", dropNode && dropNode.label, dropType);
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log("tree drop: ", dropNode.label, dropType);
    },
    allowDrop(draggingNode, dropNode, type) {
      if (dropNode.data.label === "二级 3-1") {
        return type !== "inner";
      } else {
        return true;
      }
    },
    allowDrag(draggingNode) {
      return draggingNode.data.label.indexOf("三级 3-2-2") === -1;
    },
    getCheckedNodes(data) {
      this.userindex = data.id;
      this.username = data.label;
      this.menu = data.parentId;
      if (data.data.scope == "1") {
        this.type = [""];
      }else{
        this.type=[];
      }
      console.log(data);
    },
    change1(data) {
      //console.log(data)
      this.a = false;
      this.b = !this.b;
      if ((this.b = true)) {
        this.form.name = this.username;
        this.form.menu = this.menu;
        this.form.type = this.type;
      } else {
      }
    },
    onSubmit() {
      // for (var i = 0; i < this.data.length; i++) {
      //   if (this.data[i].id > this.mun) {
      //     this.mun = this.data[i].id;
      //   }
      // }
      // for (var i = 0; i < this.data[0].children.length; i++) {
      //   if (this.data[0].children[i].id > this.mun) {
      //     this.mun = this.data[0].children[i].id;
      //   }
      // }
      // for (var i = 0; i < this.data[1].children.length; i++) {
      //   if (this.data[1].children[i].id > this.mun1) {
      //     this.mun1 = this.data[1].children[i].id;
      //   }
      // }
      // 新增
      //(this.form.menu);
      if (this.a == true) {
        if (this.form.menu == "") {
          this.$confirm("请选择父级或者创建一个父级");
        }
        if (this.form.menu == "0") {
          this.editObj2.label = this.form.name;
          //this.editObj2.id = this.mun++;
          this.editObj2.route = this.form.route;
          this.editObj2.remarks = this.form.remarks;
          this.editObj2.type = this.form.type;
          if (this.form.type == null) {
            this.inttype = 0;
          } else {
            this.inttype = 1;
          }
          Axios.post("", {
            name: this.editObj2.label,
            path: this.editObj2.route,
            parentid: 0,
            cpid: 1,
            cpname: "admin",
            scope: this.inttype,
            img: "favicon.ico",
          })
            .then((response) => {
              console.log(response);

              if (response.data.code == 10001) {
                //this.list1.push(q);
                this.$message({
                  message: response.data.result,
                  type: "success",
                });
                this.$options.methods.fuzhi();
                this.$forceUpdate(this.data);
                //location.reload();
                //this.data.push(this.editObj2);
                //this.seeObj.push(q)
              } else {
                this.$message({
                  message: response.data.msg,
                  type: "warning",
                });
              }
            })
            .catch(function (error) {
              console.log(error);
            });
          //(this.editObj2);
          this.editObj2 = {
            id: "",
            label: "",
            menu: "0",
            route: "",
            remarks: "",
            delivery: false,
            type: [],
            children: [],
          };
          this.form = {
            name: "",
            menu: "",
            route: "",
            remarks: "",
            delivery: false,
            type: [],
          };
        }
        for (var i = 0; i < this.data.length; i++) {
          if (this.data[i].id == this.form.menu) {
            this.editObj1.label = this.form.name;
            //this.editObj1.id = this.mun++;
            this.editObj1.route = this.form.route;
            this.editObj1.remarks = this.form.remarks;
            this.editObj1.type = this.form.type;
            this.editObj1.menu = this.form.menu;
            if (this.form.type == "") {
              this.inttype = 1;
            } else {
              this.inttype = 0;
            }
            Axios.post("", {
              name: this.editObj1.label,
              path: this.editObj1.route,
              parentid: this.editObj1.menu,
              cpid: 1,
              cpname: "admin",
              scope: this.inttype,
              img: "favicon.ico",
            })
              .then((response) => {
                console.log(response);

                if (response.data.code == 10001) {
                  //this.list1.push(q);
                  this.$message({
                    message: response.data.result,
                    type: "success",
                  });
                  // this.data[i].children.push(this.editObj1);
                  this.$options.methods.fuzhi();
                  this.$nextTick(function () {
                    this.data;
                  });
                  location.reload();
                  //this.data.push(this.editObj2);
                  //this.seeObj.push(q)
                } else {
                  this.$message({
                    message: response.data.msg,
                    type: "warning",
                  });
                }
              })
              .catch(function (error) {
                console.log(error);
              });
            //console.log(this.data);
            this.editObj1 = {
              id: "",
              label: "",
              menu: "0",
              route: "",
              remarks: "",
              delivery: false,
              type: [],
            };
            this.form = {
              name: "",
              menu: "",
              route: "",
              remarks: "",
              delivery: false,
              type: [],
            };
          }
        }
        this.a = false;
      }
      // 编辑
      else if (this.b == true) {
        this.chaObj.label = this.form.name;
        this.chaObj.menu = this.form.menu;
        this.chaObj.route = this.form.route;
        this.chaObj.remarks = this.form.remarks;
        this.chaObj.type = this.form.type;
        //this.chaObj.id = this.data[i].children[j].id;
        this.editObj1.label = this.form.name;
        this.editObj1.route = this.form.route;
        this.editObj1.remarks = this.form.remarks;
        this.editObj1.type = this.form.type;
        this.editObj1.menu = this.form.menu;
        if (this.form.type == 1) {
          this.inttype = 1;
        } else {
          this.inttype = 0;
        }
        Axios.put("", {
          id: this.userindex,
          name: this.editObj1.label,
          path: this.editObj1.route,
          parentid: this.editObj1.menu,
          cpid: 1,
          cpname: "admin",
          scope: this.inttype,
          img: "favicon.ico",
        })
          .then((response) => {
            console.log(response);
            this.$options.methods.fuzhi();
            if (response.data.code == 10001) {
              //this.list1.push(q);
              this.$message({
                message: response.data.result,
                type: "success",
              });
              //location.reload();
              //this.$set(this.data[i].children, j, this.chaObj);
              //this.data.push(this.editObj2);
              //this.seeObj.push(q)
            } else {
              this.$message({
                message: response.data.msg,
                type: "warning",
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      this.$confirm("确认是否要删除？")
        .then((_) => {
          Axios.delete("" , {
            data: {
              id: data.id,
            },
          }).then((res) => {
            console.log(res);
            this.$options.methods.fuzhi();

            if (res.data.code == 10001) {
              this.$message({
                message: res.data.result,
                type: "success",
              });
              //children.splice(index, 1);
              //location.reload();
            } else {
              this.$message({
                message: res.data.msg,
                type: "warning",
              });
            }
          });
        })
        .catch((_) => {});
      // this.fuzhi();
      this.$options.methods.fuzhi();
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.append(data)}
            ></el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.change(data)}
            ></el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            ></el-button>
          </span>
        </span>
      );
    },
  },
};
</script>
<style scoped>
.el-select {
  position: relative;
}
</style>

这是今天最后一篇了，要吃饭啦！！！

以后有空了在继续上传！！！

爱发呆的程序员
关注
Vue实战之axios基本使用
9.冄2.7.號的博客
07-29 1889
1、Axios 基本使用 2、Vue 生命周期 3、Vue 中组件（component） 4、Vue 中路由（Vue Router） 5、Vue CLI 脚手架 6、在脚手架中使用 axios
Vue2 + element ui 后台管理系统（项目总结）
m0_70851631的博客
05-12 5813
1，准备需要框架，插件，组件库...... Vue框架 （vue2.x版本） Element Ul 组件 axios (网络请求,请求拦截器，响应拦截器) quill（富文本编辑器） echarts（数据可视化工具） 1-1，axios的封装 axios的封装包含了（请求拦截器，响应拦截器，创建的时候设置请求超时时间） 请求拦截器（经常用来设置请求头，用户登录后像后台发送token，这个token可以判断我们是否登录成功） 响应拦截器（做一些token过期处理，还可以对后台返回给我们的状态码
Vue中axios使用详解
sunnyjingqi的博客
05-20 9964
一：axios定义 axios是什么：axios它是基于promise的http库，可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护，直接推荐axios库 axios的作用：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。 具备以下特征： a.从浏览器中创建 XMLHttpRequest b.从...
Vue开发使用Axios遇到了大坑！
weixin_44542399的博客
04-25 912
使用Vue的axios连接部分正常，部分不正常，服务器状态码200，服务器端控制台也不报错。但是页面请求就是报错。使用iPhone手机报错，换华为安卓手机也是一样的报错，安卓手机不知道怎么调试，使用macOS的Safari浏览器可以调试iPhone手机浏览器，调试报错，但是不知道原因。就单纯报错，服务器是没有任何问题。错误代码是200。 也就是说，我PC版本浏览器缩放成手机浏览器一切正常，真机报...
element树形空间el-tree的数据赋值
weixin_43837268的博客
06-23 4503
<el-button type="warning" icon="el-icon-setting" size="mini" @click="showSetRightDialog(scope.row)">分配权限</el-button> <!-- 分配权限的对话框 --> <el-dialog title="分配权限" .
Vue中动态树形菜单，以及
最新发布
lz17267861157的博客
09-26 1076
🏅，一个在CSDN分享笔记的博主。📚📚🌟在这里，我要推荐给大家我的专栏《🎯🎯🚀无论你是编程小白，还是有一定基础的程序员，这个专栏都能满足你的需求。我会用最简单易懂的语言，带你走进Vue的世界，让你从零开始，一步步成为JAVA大师。🚀🏆🌈让我们在Vue的世界里畅游吧！🌈🎁🎁💖期待你的加入，一起学习，一起进步！💖💖。
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
10-14
在本文中，我们将探讨如何在Vue.js应用程序中结合Element UI库创建一个具有下拉功能菜单的树形控件，这个功能通常用于增强用户界面的交互性。Vue和Element UI的组合提供了丰富的UI组件，使得开发人员能够快速构建...
批量添加数据的表单界面（表单含树形下拉框）vue + element
03-24
在这个表单界面中，每个输入控件，如树形下拉框，都可以视为一个自定义的Vue组件。创建组件时，我们需要定义它的模板（template）、数据（data）、方法（methods）以及可能的计算属性（computed）等。 Element UI是...
elementui树状菜单tree_Java + Element-UI 实现简单的树形菜单
weixin_39682301的博客
02-06 1746
一、简单入门级树形菜单实现(纯后台逻辑)1、简介(1)开发环境IDEA + JDK1.8 + mysql 1.8SpringBoot 2.2.6 + mybatis-plus此处仅后台开发(返回 json 数据)，前台页面展示后续会讲解。(2)数据表如下，仅供参考，可以添加 修改时间、创建时间、逻辑删除等字段。DROP DATABASE IF EXISTS test;CREATE DATABASE...
vue 在js 文件中使用store_【vue】vue +element 搭建项目，vuex中的store使用
weixin_39958112的博客
12-19 1499
概述：每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。你不能直接改变 store 中的状态。改变 store 中的状...
基于Vue的树形选择组件
08-08
基于 Vue 的树形选择组件
vue使用Axios详细流程
qq_37312180的博客
02-10 7487
【代码】vue使用Axios详细流程。
Vue3进阶使用详解(node.js、Vue3路由基础项目、axios的使用详细(实现数据分页---前后端分离)、axios加载失败)
m0_56245143的博客
04-24 2575
导入axios的代码放置的位置为：原因：一般情况下如果是第一次使用vue3且第一次导入会有一个问题：这样就能够解决axios导入的错误。 安装的过程是全程点击下一步，除了安装时要选择自己的安装路径（选择安装在c/d盘外） node: 进入node.js环境 npm:安装模块 打开cmd终端输入：node -v 测试能否打印node.js的版本号：如下图表示已经安装成功：
element ui tree 树形控件 数据重新赋值 默认选中
qq_25219151的博客
09-25 4037
element ui tree 树形控件 数据重新赋值 默认选中 需求：当对树形控件的数据进行重新赋值时，当前勾选及展开的状态需要保留。 <template> <div> <el-tree ref="tree" :data="data" show-checkbox node-key="id" :default-expanded-keys
Element el-tree 后台数据处理
weixin_47601243的博客
07-30 2977
Element el-tree 后台数据处理
el-tree从后端获取的数据并默认勾选，前后端交互
weixin_43820434的博客
12-17 2681
展示代码：方便理解，代码上附上注释。 <div class="block"> <el-tree //展示的数据 :data="treedata" //展示数据的自定义格式，可不写，不写就是默认按官方文档的格式 :props="defaultProps" //节点是否可被选择，默认为false，即一开始都没被勾选 show-checkbox //自己数据的唯一标识符
Elementui tree节点树再次请求数据后会自动折叠，解决方案
L1515115的博客
04-26 4251
Elementui tree节点树再次请求数据后会自动折叠，解决方案
elementUI中tree组件 懒加载使用
qq_43898141的博客
03-26 1974
官网地址学习地址：传送阵 下面是 html代码 /*这个是输入框 模糊查询的，但在懒加载 模式下， 显得有些鸡肋，因为，这个搜索是只能查找到，已经显示在页面的数据 */ <el-input placeholder="输入关键字进行过滤" v-model="filterText"> //定义一个属性监听表单变化 </el-input> /*
vue组件之Element-Ui Tree结合Dialog 实现树形选择器组件
xiaoyaoluntian的博客
12-30 2636
SelectBox 树状选择组件 废话不多说 先贴图 并附上Git地址 这里是git地址 树状选择效果图 列表多选效果图 开始废话 开发背景 众所周知，大部分企业的管理后台的开发离不开权限管理，一般来说，我们会分析各种权限把他们量化为资源，然后分配到各个角色/部门中，然后再给用户赋予各种角色或者挂载到各个部门。 如果权限设计的足够复杂，第三方UI常用的穿梭框等组件就不能完美的满足我们的需求，进而需要开发人员去根据需求，寻找多个组件组合使用。 但是，里面的业务逻辑万变不离其宗。 接下来 介绍一下笔者写
从零开始使用 Vue + Element 的详细安装步骤
Vue + Element 项目搭建详细步骤 本文将详细介绍如何使用 Vue + Element 从零开始...至此，我们已经完成了使用 Vue + Element 搭建一个项目的基本步骤，包括安装 Node.js、安装 Vue、安装 Element、配置路由等步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值