element-ui tree组件实现在线增删改

最新推荐文章于 2024-04-17 16:21:59 发布
最新推荐文章于 2024-04-17 16:21:59 发布
阅读量609 收藏
点赞数
文章标签： ui vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yufengaotian/article/details/132904774
版权

这里要实现一个tree 增删改

<!--oracle巡检项-->
<template>
  <div class="oracle_instanceType">
    <el-row type="flex" align="middle" justify="space-between">
      <i
        class="el-icon-s-fold iBox"
        @click="handleFolder(false)"
        v-if="folderOpen"
      ></i>
      <i
        class="el-icon-s-unfold iBox"
        v-if="!folderOpen"
        @click="handleFolder(true)"
      ></i>
      <pageHeader title="Oracle巡检项" style="flex: 1">
        <template v-slot:right>
          <el-button type="primary" @click="setInspectionTypeFn"
            >定义巡检项</el-button
          >
        </template>
      </pageHeader>
    </el-row>
    <div class="mainContent">
      <div class="leftBox" id="leftContainer" v-if="folderOpen">
        <el-container>
          <div style="width: 100%">
            <p class="treeName">
              <span>巡检项分类</span>
            </p>
            <el-aside
              class="aside-left"
              style="
                width: 100%;
                margin-top: 10px;
                height: calc(100vh - 86px);
                position: relative;
              "
              :class="folderOpen ? 'openStyle' : 'folderStyle'"
            >
              <el-tree
                ref="typeTree"
                :data="folderData"
                node-key="id"
                default-expand-all
                :expand-on-click-node="false"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{{ data.name }}</span>
                  <span>
                    <i
                      class="el-icon-edit-outline icon-size"
                      @click="() => edit(data)"
                    ></i>
                    <i
                      class="el-icon-circle-plus icon-size"
                      @click="() => append(data)"
                    ></i>
                    <i
                      v-if="data.parentId !== '0'"
                      class="el-icon-remove icon-size"
                      @click="() => remove(node, data)"
                    ></i>
                  </span>
                </span>
              </el-tree>
            </el-aside>
          </div>
          <el-main> </el-main>
        </el-container>
        <div class="resize" title="缩放侧边栏" @mousedown="dragTree">⋮</div>
      </div>
      <div class="rightBox" id="rightContainer">
        <div class="ts-middle-part">
          <el-row type="flex">
            <el-col :span="24">
              <div class="flexBox">
                <div class="doneButtonDiv">
                  <el-button type="primary" @click="setInspectionType"
                    >巡检项归类</el-button
                  >
                </div>
                <div class="searchDiv">
                  <enumSearch
                    :theItems="'vm'"
                    :serviceType="'vmware'"
                    :theUrl="'/v1/vmware/api/search_items'"
                    @searchContdition="searchContdition"
                    @toSearch="toSearch"
                  ></enumSearch>
                </div>
                <div class="defButtonDiv">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="自定义列表项"
                    placement="top"
                  >
                    <span
                      class="el-icon-s-tools defBtn"
                      @click="defHeadList"
                    ></span>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="ts-body-part">
          <el-table
            ref="multipleTable"
            :data="dataList"
            v-loading="loading"
            border
          >
            <template slot="empty">
              <empty-in-table
                v-if="dataList.length < 1 && !loading"
              ></empty-in-table>
            </template>
            <el-table-column
              v-for="(item, index) in tableHeader"
              :key="item.key + index"
              :label="item.label"
              :prop="item.key"
              :min-width="item.minWidth"
              :fixed="index == 0"
              :sortable="item.sortable"
              show-overflow-tooltip
            >
              <!-- 自定义内容 -->
              <template slot-scope="scope">
                <!-- 名称列 -->
                <div v-if="item.key == 'app_name'" class="nameAndIcon">
                  <!-- 文字跳转部分 -->
                  <el-button
                    class="button"
                    @click="showDetails(scope.row)"
                    type="text"
                    >{{ scope.row.app_name }}
                  </el-button>
                </div>
                <!-- 关联能力模板，资源分类 -->
                <div v-else-if="item.key == 'model' || item.key == 'source'">
                  <p v-for="(a, index) in scope.row[item.key]" :key="index">
                    {{ a }}
                  </p>
                </div>
                <!-- 其他简单文字列 -->
                <div v-else class="online">
                  <span>{{ scope.row[item.key] }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="130"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  v-permission="'inspection_resourceManage_host_editHostBtn'"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  v-permission="'inspection_resourceManage_host_deleteHostBtn'"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :paginationData="pagination"
            @handleCurrentChange="handleCurrentChange"
            @handleSizeChange="handleSizeChange"
          ></pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { tableHeader } from "./utils/index.js";
import { getSession, setSession } from "@/commons/js/searchFresh.js";
import DefHeadList from "@/components/customColumns.vue";
import setInspectionType from "./components/setInspectionType.vue";
import * as requestMethod from "@/api/inspection/inspectionType/index.js";

let id = 1000;
export default {
  name: "oracleManage",
  components: {
    DefHeadList,
    setInspectionType,
  },
  data() {
    return {
      folderOpen: true,
      addOracleInstanceDrawerVisible: false,
      excelImportVisible: false,
      defaultProps: {
        children: "children",
        label: "name",
      },
      defaultSearch: null,
      loading: false,
      dataList: [],
      // 左侧树数据
      folderData: [
        {
          id: 0,
          label: "全部",
          children: [
            {
              id: 1,
              label: "一级 1",
              children: [
                {
                  id: 4,
                  label: "二级 1-1",
                  children: [
                    {
                      id: 9,
                      label: "三级 1-1-1",
                    },
                    {
                      id: 10,
                      label: "三级 1-1-2",
                    },
                  ],
                },
              ],
            },
            {
              id: 2,
              label: "一级 2",
              children: [
                {
                  id: 5,
                  label: "二级 2-1",
                },
                {
                  id: 6,
                  label: "二级 2-2",
                },
              ],
            },
            {
              id: 3,
              label: "一级 3",
              children: [
                {
                  id: 7,
                  label: "二级 3-1",
                },
                {
                  id: 8,
                  label: "二级 3-2",
                },
              ],
            },
          ],
        },      
],
      parentId: null,
      organizationId: null,
      editLabel: "",
      pagination: {
        current_page: 1, // 当前位于哪页
        per_page: 10, //每页显示多少条
        total_count: 0,
        total_page: 1, //总页码
      },
      currentNodeKey: "",
      //自定义列
      tableHeader: JSON.parse(JSON.stringify(tableHeader)), // 初始化表头本地配置
      tableHeaderRpa: [],
      headVisible: false,
      headData: {},
      // 定义巡检项
      setDialog: false,
    };
  },
  mounted() {
    this.dataList = [
      {
        id: 1,
        app_name: "测试巡检项001",
        status: "正常",
        ex_system_id: "资源分类A",
        catalog_app_name: "Windows命令",
        app_architecture: "80能力",
        dept_belong: "判定结果成功",
        bus_name: "秦小藏",
        bus_time: "2023-08-15 13:25:34",
        editor_name: "研发",
        editDate: "2023-08-18 13:25:34",
      },
    ];
    // 获取巡检项分类树
    this.getLeftTree();
  },
  methods: {
    getLeftTree() {
      requestMethod.getCategoryTree("get").then((res) => {
        if (res.status) {
          console.log("getLeftTree", res.data);
          this.folderData = res.data;
        }
      });
    },
    // 详情跳转
    showDetails(row) {
      this.$router.push({
        path: "/inspection/inspectionTask/inspectionTypeDetails",
        query: { id: row.id },
      });
    },
    closeDialog() {
      this.addOracleInstanceDrawerVisible = false;
      this.excelImportVisible = false;
    },
    //控制左侧菜单展开折叠
    handleFolder(is_open) {
      if (is_open) {
        this.folderOpen = true;
      } else {
        this.folderOpen = false;
      }
    },
    // 左侧树新增，
    append(data) {
      console.log("nodeData", data);
      this.organizationId = data.id;
      // console.log("全部树的菜单信息", this.folderData);
      this.$prompt("请输入名称", "添加巡检项分类", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern:
          /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z])(([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[-_a-zA-Z0-9]){0,31})$/,
        inputErrorMessage:
          "支持以中文或英文开头，由中文、英文、数字及特殊字符_-组成，1-32位",
      })
        .then(({ value }) => {
          // 请求接口保存， 需要参数
          /**      
           {
            "description": "string",
            "name": "string",
            "parentId": "string",
            "sort": 0
          }
          */
          // 本地测试
          // let newChild = { id: id++, label: value, children: [] };
          // if (!data.children) {
          //   this.$set(data, "children", []);
          // }
          // data.children.push(newChild);
          // 走在线接口参数：name, parentId, sort, description
          let sortNumber = data.children.length;
          this.appendType(value, data.id, sortNumber);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消添加",
          });
        });
    },
    appendType(name, id, sortNumber, description = "") {
      let vo = {
        name: name,
        parentId: id,
        sort: sortNumber,
        description: description,
      };
      requestMethod.addCategoryTree("post", vo).then((res) => {
        if (res.status) {
          // 重新渲染树
          this.getLeftTree();
        }
      });
    },
    // 左侧树编辑
    edit(data) {
      console.log("nodeData", data);
      // console.log("全部树的菜单信息", this.folderData);
      this.$prompt("请输入名称", "添加巡检项分类", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern:
          /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z])(([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[-_a-zA-Z0-9]){0,31})$/,
        inputErrorMessage:
          "支持以中文或英文开头，由中文、英文、数字及特殊字符_-组成，1-32位",
        inputValue: data.name,
      })
        .then(({ value }) => {
          // 参数：name, parentId, sort, description
          this.editType(
            value,
            data.parentId,
            data.id,
            data.sort,
            data.description
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    editType(name, parentId, selfId, sortNumber, description) {
      let parm = {
        name: name,
        parentId: parentId,
        selfId: id,
        sort: sortNumber,
        description: description,
      };
      requestMethod.editCategoryTree("put", parm).then((res) => {
        if (res.status) {
          // 重新渲染树
          this.getLeftTree();
        }
      });
    },
    // 左侧树删除
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },
    mousedown() {},
    getDataList() {},
    handleSortChange() {},
    clickNode() {},
    toSearch(val) {
      this.getDataList(
        getSession("searchFresh").keyword,
        getSession("searchFresh").pageNo,
        getSession("searchFresh").pageSize,
        true
      );
    },
    searchContdition() {},
    // 上下分页
    handleCurrentChange(val) {
      this.getDataList(
        getSession("searchFresh").keyword,
        val,
        getSession("searchFresh").pageSize,
        true
      );
    },
    // 每页显示多少条
    handleSizeChange(val) {
      this.getDataList(
        getSession("searchFresh").keyword,
        getSession("searchFresh").pageNo,
        val,
        true
      );
    },

    addOracleInstance() {
      this.addOracleInstanceDrawerVisible = true;
    },
    setInspectionType() {
      this.excelImportVisible = true;
    },
    // 拖动
    dragTree(e) {
      let leftViewContainer = document.getElementById("leftContainer");
      let rightViewContainer = document.getElementById("rightContainer");
      //得到点击时该容器的宽高：
      let leftViewContainerWidth = leftViewContainer.offsetWidth;
      let startX = e.clientX;
      let startY = e.clientY;
      document.onmousemove = function (e) {
        e.preventDefault();
        //得到鼠标拖动的宽高距离：取绝对值
        let distX = Math.abs(e.clientX - startX);
        //往右方拖动：
        if (e.clientX > startX) {
          leftViewContainer.style.width = leftViewContainerWidth + distX + "px";
          rightViewContainer.style.width =
            leftViewContainerWidth - distX + "px";
        }
        //往左方拖动：
        if (e.clientX < startX && e.clientY > startY) {
          leftViewContainer.style.width = leftViewContainerWidth - distX + "px";
          rightViewContainer.style.width =
            leftViewContainerWidth + distX + "px";
        }
        if (parseInt(leftViewContainer.style.width) >= 600) {
          leftViewContainer.style.width = 600 + "px";
        }
        if (parseInt(leftViewContainer.style.width) <= 20) {
          leftViewContainer.style.width = 20 + "px";
        }
      };
      document.onmouseup = function () {
        document.onmousemove = null;
      };
    },
  },
};
</script>
<style src="./index.less"  lang='less' scoped>
</style>

御风傲天
关注
element tree组件增删改
oy123kai的博客
11-20 284
<el-tree :data="data" node-key="id" :props="defaultProps" default-expand-all> <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ node.label }}<
Element ui 树形表格 增删改查
qq_45308915的博客
11-12 3528
如何使用Element ui 树形表格 增删改查 概述：element ui 提供了树的增删改查，百度了很久发现没有合适的，只能自己封装了， 大概样子就是这样，有四个操作功能按钮，增加子集，增加同级，删除，清空，思路参考了element ui 树的增删改查 直接看代码 . 首先是表格，多余的表格行我删除了 自行添加 <el-table :data="tableData" style="width: 100%;fo
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
11-19
需求： vue-cli项目树形控件：一级节点为本地节点，默认展开一级节点，增删改后局部刷新数据。 增加节点，点击确定后局部刷新，渲染新数据。 源码 element组件样式 <el-tree class="treeitems" :data="data" node-key="id" :props="defaultProps" :load="loadNode" lazy :default-expanded-keys="[0]" @node-click="handle
element-ui 树形控件el-tree右键自定义菜单实现节点增删改
Luo_LA的博客
01-13 1万+
效果展示： 实现步骤： 展示树形文件夹 @node-contextmenu=“floderOption”：element-ui定义的右键点击事件 data为element-ui中自带的json格式的数据 <el-tree :data="data" draggable node-key="id" @node-contextmenu="floderOption"> <span class="custom-tree-node" slot-scope="{ node, data }"&g
elementui树形组件的自定义增删节点
热门推荐
木头房子的格子铺
01-03 3万+
elementUI树新增和删除的功能 vue项目 elementui树 el-tree新增和删除节点 elementui新增和删除节点树 el-tree新增和删除节点图标 vue和elemenui树
vue+element-ui+springboot 在线表格编辑
Tjhfsghbjknjdy的博客
02-09 922
动态表格在线编辑
element-ui tree结构实现增删改自定义功能代码
10-14
在本文中，我们将深入探讨如何使用Element-UI的Tree组件实现增删改的自定义功能。Element-UI是一个基于Vue.js的开源UI组件库，它提供了丰富的组件供开发者使用，其中包括Tree组件，用于展示层级关系的数据。在描述的...
ElementUI增删改的实现及表单验证
uit67t567的博客
07-28 654
更多详细内容可参考官网。
vue3 ts element-plus el-tree添加树节点 删除树节点 修改树节点
hmbbpdx的博客
04-14 1982
【代码】vue3 ts element-plus el-tree添加树节点 删除树节点 修改树节点。
Element编辑器
10-11
Element编辑完美等游戏，内有使用说明
【vue】el-tree的新增/编辑/删除节点
最新发布
qq_39404437的博客
04-17 5192
关于树形结构的新增同级节点等四种操作，各种参数配置完全继承el-tree，本篇使用vue2 + element-ui。
基于Vue和Element-UI框架的在线编辑器 vue-el-editor
BlueSea的博客
09-20 4398
vue-el-editor Project setup npm install vue-el-editor Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and fixes files npm run lint Customize configuration See Configuration Reference. How
如何修改ElementUI源码
张大晴的博客
07-31 1401
链接：https://www.jianshu.com/p/e745787118d0 安装 首先将ElementUI的官方源码库clone下来 https://github.com/ElemeFE/element.git cd element npm install 打包 安装完依赖后运行打包命令npm run dist 执行完成后可以发现根目录下多了lib文件...
elementui el-tree 可编辑改造
qq_29384639的博客
08-04 1236
最终效果如下图： 代码： <template> <div class="app-container"> <div class="title">督查表设置</div> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="表名" prop="title">
vue+el-tree ----增加修改删除上下移动
qq_44716001的博客
06-08 819
【代码】vue+el-tree ----增加修改删除上下移动。
element-- el-tree 组件封装使用（ 新增、编辑、删除节点）
weixin_45102212的博客
05-11 8311
项目中会遇到需要树来展示数据的，要求每个节点需要增删改的，具体需要的根据自己实际项目需求可进行代码修改 如图： el-tree组件封装： <template> <div class="white-body-view"> <el-tree id="my-tree" ref="tree" class="tree-view structure-tree scroll-bar" :data="
vue中使用elementui实现对树组件tree右键增删改功能
weixin_65635437的博客
06-21 5553
vue中使用elementui实现对树组件tree右键增删改功能
vuecli3+ 基于element的tree组件，二次封装的树形组件，可以搜索、拖拽改变分组、拖拽排序、创建编辑删除分组、拖拽改变叶子节点分组等
csl125的博客
09-01 1463
【代码】vuecli3+ 基于element的tree组件，二次封装的树形组件，可以搜索、拖拽改变分组、拖拽排序、创建编辑删除分组、拖拽改变叶子节点分组等。
自定义Element-UI Tree增删改功能实现
"这篇资源主要介绍了如何在Vue项目中利用Element-UI库的Tree组件实现树形结构的增删改自定义功能。示例代码包括了模板和JavaScript部分，涉及属性配置、事件监听以及方法实现。" Element-UI是基于Vue.js的一个流行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值