安科网

VUE饿了么树形控件添加增删改功能的示例代码

ChinaHuanyang

ChinaHuanyang

2017-10-17

关注 关注

本文介绍了VUE饿了么树形控件添加增删改功能的示例代码，分享给大家，具体如下：

element-ui树形控件：地址

在原文档中有个案例是有新增和删除功能，但是后来发现其修改的数据并不能直接影响到树形数据，所以采用了 render-content 的API重新写了个组件。

写个开发的步骤，所以文章比较长emmm

大致效果如图：

VUE饿了么树形控件添加增删改功能的示例代码

1.省市API

在网上复制了个省市的list，有两个属性是新增的

  • isEdit ：控制编辑状态
  • maxexpandId ：为现下id的最大值
export default{

  maxexpandId: 95,
  treelist: [{ 
    id: 1, 
    name: "北京市", 
    ProSort: 1, 
    remark: "直辖市",
    pid: '',
    isEdit: false,
    children: [{
      id: 35,
      name: "朝阳区",
      pid: 1,
      remark: '',
      isEdit: false,
      children: []
    }]
  }{...}]
}

2.el-tree Component基本

咱们一步步来，先写个饿了么的组件

<template>
  <el-tree ref="expandMenuList" class="expand-tree"
    v-if="isLoadingTree"
    :data="setTree"
    node-key="id"
    highlight-current
    :props="defaultProps"
    :expand-on-click-node="false"
    :render-content="renderContent"
    :default-expanded-keys="defaultExpandKeys"></el-tree>
</template>
<!--
* highlight-current ：为了点击时节点高亮
* expand-on-click-node : 只能箭头控制树形的展开收缩
* render-content : 节点渲染方式
* default-expanded-keys ：默认展开节点
-->

同时引入API和节点渲染的组件

import TreeRender from '@/components/tree_render'
import api from '@/resource/api'

然后搭建好基础

data(){
 return{
  maxexpandId: api.maxexpandId,//新增节点开始id
  non_maxexpandId: api.maxexpandId,//新增节点开始id(不更改)
  isLoadingTree: false,//是否加载节点树
  setTree: api.treelist,//节点树数据
  defaultProps: {
   children: 'children',
   label: 'name'
  },
  defaultExpandKeys: [],//默认展开节点列表
 }
},

添加个渲染的method

methods: {
  renderContent(h,{node,data,store}){
   let that = this;//指向vue
   return h(TreeRender,{
    props: {
     DATA: data,//节点数据
     NODE: node,//节点内容
     STORE: store,//完整树形内容
    },
    on: {//绑定方法
     nodeAdd: ((s,d,n) => that.handleAdd(s,d,n)),
     nodeEdit: ((s,d,n) => that.handleEdit(s,d,n)),
     nodeDel: ((s,d,n) => that.handleDelete(s,d,n))
    }
   });
  },
  handleAdd(s,d,n){//增加节点
   console.log(s,d,n)
  },
  handleEdit(s,d,n){//编辑节点
   console.log(s,d,n)
  },
  handleDelete(s,d,n){//删除节点
   console.log(s,d,n)
  }
}

3.tree_render Component基本

渲染组件：

<template>
  <span class="tree-expand">
    <span class="tree-label">
      <span>{{DATA.name}}</span>
    </span>
    <span class="tree-btn">
      <i class="el-icon-plus" @click.stop="nodeAdd(STORE,DATA,NODE)"></i>
      <i class="el-icon-edit" @click.stop="nodeEdit(STORE,DATA,NODE)"></i>
      <i class="el-icon-delete" @click.stop="nodeDel(STORE,DATA,NODE)"></i>
    </span>
  </span>
</template>

添加好几个按钮（element-ui自带icon：地址）对应的方法：

export default{
  props: ['NODE', 'DATA', 'STORE'],
  methods: {
   nodeAdd(s,d,n){//新增
    this.$emit('nodeAdd',s,d,n)
   },
   nodeEdit(s,d,n){//编辑
    this.$emit('nodeEdit',s,d,n)
   },
   nodeDel(s,d,n){//删除
    this.$emit('nodeDel',s,d,n)
   }
  }
}

4.改

我们用isEdit来切换input和span的显示状态，首先加个input：

<!-- tree_render component -->
<template>
  <span class="tree-expand">
    <span class="tree-label" v-if="DATA.isEdit">
      <el-input class="edit" size="mini"
      :ref="'treeInput'+DATA.id"
      v-model="DATA.name"></el-input>
    </span>
    <template v-else>
      <span class="tree-label">
        <span>{{DATA.name}}</span>
      </span>
      <span class="tree-btn" v-show="!DATA.isEdit">
        <i class="el-icon-plus" @click.stop="nodeAdd(STORE,DATA,NODE)"></i>
        <i class="el-icon-edit" @click.stop="nodeEdit(STORE,DATA,NODE)"></i>
        <i class="el-icon-delete" @click.stop="nodeDel(STORE,DATA,NODE)"></i>
      </span>
    </template>
  </span>
</template>

编辑的时候按钮同时消失，那么什么时候编辑完成呢？

  • 编辑完按enter键=》监听input的enter输入
  • 点击其他节点=》input失焦-blur=》编辑时自动聚焦-focus
  • 点击当前节点范围

当以上三点发生一项，节点对应的data都要isEdit = false;

1、enter键

<!-- tree_render component -->
<el-input @keyup.enter.native="nodeEditPass(STORE,DATA,NODE)"></el-input>

添加方法：

//tree_render component
methods: {
  nodeEditPass(s,d,n){
    d.isEdit = false;
  }
}

2、focus or blur

<!-- tree_render component -->
<el-input @blur="nodeEditPass(STORE,DATA,NODE)"></el-input>

后来发现第一次编辑时能让input聚焦，点击第二个input就不起作用了，加了autofocus属性也同样如此。所以我们要在点击编辑icon的时候，用原生的input autofocus。

修改方法：

//tree_render component
nodeEdit(s,d,n){//编辑
 d.isEdit = true;
 this.$nextTick(() => {
  this.$refs['treeInput'+d.id].$refs.input.focus()
 })
 this.$emit('nodeEdit',s,d,n)
}

3、当前节点点击

采用el-tree已有的API――node-click

<!-- el-tree component -->
<el-tree @node-click="handleNodeClick"></el-tree>

添加methods：

//el-tree component
methods: {
  handleNodeClick(d,n,s){//点击节点
   d.isEdit = false;//放弃编辑状态
  }
}

问题来了，如果在编辑状态下点击此节点也同样会影响input，这就无法进入编辑，所以要阻止input事件冒泡：

<!-- tree_render component -->
<el-input @click.stop.native="nodeEditFocus"></el-input>

添加methods：

//tree_render component
methods: {
  nodeEditFocus(){}
}

4、v-show代替v-if

这里有个新的问题，当用户经常编辑修改，v-if模板的开销更高，所以改用v-show。而后者不支持template模板，所以要适当调整一下位置：

<template>
  <span class="tree-expand">
    <span class="tree-label" v-show="DATA.isEdit">
      <el-input class="edit" size="mini" autofocus
      v-model="DATA.name"
      :ref="'treeInput'+DATA.id"
      @click.stop.native="nodeEditFocus"
      @blur="nodeEditPass(STORE,DATA,NODE)"
      @keyup.enter.native="nodeEditPass(STORE,DATA,NODE)"></el-input>
    </span>
    <span v-show="!DATA.isEdit">
      <span>{{DATA.name}}</span>
    </span>
    <span class="tree-btn" v-show="!DATA.isEdit">
      <i class="el-icon-plus" @click.stop="nodeAdd(STORE,DATA,NODE)"></i>
      <i class="el-icon-edit" @click.stop="nodeEdit(STORE,DATA,NODE)"></i>
      <i class="el-icon-delete" @click.stop="nodeDel(STORE,DATA,NODE)"></i>
    </span>
  </span>
</template>

5.增

新增节点 =》添加一条数据

  1. 新增的同时展开父节点
  2. 是否考虑无限新增
//el-tree component
handleAdd(s,d,n){//增加节点
 console.log(s,d,n)
 if(n.level >=6){
  this.$message.error("最多只支持五级！")
  return false;
 }
 //添加数据
 d.children.push({
  id: ++this.maxexpandId,
  name: '新增节点',
  pid: d.id,
  isEdit: false,
  children: []
 });
 //展开节点
 if(!n.expanded){
  n.expanded = true;
 }
}

新增节点字体加粗 =》给节点添加一个class =》 如何判断是否新增？

我们有一个参数maxexpandId

给tree_render添加一个prop：

//el-tree component
renderContent(h,{node,data,store}){//加载节点
 let that = this;
 return h(TreeRender,{
  props: {
   ...
   maxexpandId: that.non_maxexpandId
  },
  on: {...}
 });
}

根据id判断：

//tree_render component
props: ['NODE', 'DATA', 'STORE', 'maxexpandId']
<!-- tree_render component -->
<span v-show="!DATA.isEdit" 
:class="[DATA.id > maxexpandId ? 'tree-new tree-label' : 'tree-label']"
:ref="'treeLabel'+DATA.id">
  <span>{{DATA.name}}</span>
</span>
.tree-expand .tree-label.tree-new{
  font-weight:600;
}

6.删

跟新增同义：删除节点 =》删除一条数据

  • 新增节点直接删除
  • 已有节点需提示再删除
  • 已有子级节点不能删除
handleDelete(s,d,n){//删除节点
 console.log(s,d,n)
 let that = this;
 //有子级不删除
 if(d.children && d.children.length !== 0){
  this.$message.error("此节点有子级，不可删除！")
  return false;
 }else{
  //删除操作
  let delNode = () => {
   let list = n.parent.data.children || n.parent.data,
   //节点同级数据，顶级节点时无children
    _index = 99999;//要删除的index
   list.map((c,i) => {
    if(d.id == c.id){
     _index = i;
    }
   })
   let k = list.splice(_index,1);
   //console.log(_index,k)
   this.$message.success("删除成功！")
  }
  let isDel = () => {
   that.$confirm("是否删除此节点？","提示",{
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
   }).then(() => {
    delNode()//此处可通过ajax做删除操作
   }).catch(() => {
    return false;
   })
  }
  //新增节点直接删除，否则要通过请求数据删除
  d.id > this.non_maxexpandId ? delNode() : isDel()
 }
}

7.拓展

还有一些特别的需求，例如：

1、点击高亮的时候显示icon

.expand-tree .is-current>.el-tree-node__content .tree-btn,
.expand-tree .el-tree-node__content:hover .tree-btn{
 display: inline-block;
}

2、添加顶级节点

添加按钮：

<!-- el-tree component -->
<el-button @click="handleAddTop">添加顶级节点</el-button>

添加methods：

//el-tree component
methods: {
 handleAddTop(){
  this.setTree.push({
   id: ++this.maxexpandId,
   name: '新增节点',
   pid: '',
   isEdit: false,
   children: []
  })
 }
}

3、默认展开树形第一级

//el-tree component
mounted(){
 this.initExpand()
},
methods: {
 initExpand(){
  //isLoadingTree用意也是在此
  this.setTree.map((a) => {
   this.defaultExpandKeys.push(a.id)
  });
  this.isLoadingTree = true;
 },
}

8.github

还有些具体的样式都放在github了

api vue

ChinaHuanyang

ChinaHuanyang

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

vue设置全局访问接口API地址操作

在使用vue框架进行前后端分离项目开发时，通常涉及到与后段接口进行交互，平时一般使用比较多的就是用axios来实现调用后段接口，写法一般为。但是有一个比较普遍的问题就是，假如我们后端接口地址改变了，或者是网络地址发生了变化，就需要在上面IP以及端口的位置每

Luckyunyun 2020-08-15

vue接通后端api以及部署到服务器操作

我们在使用Vue时，通常需要调用后端API进行一系列的操作。下面分享一个我的配置方案。

分享经验共同进步 2020-08-15

python 爬虫如何实现百度翻译

本文将会通过爬虫的方式实现简单的百度翻译。本文中的代码只供学习，不允许作为于商务作用。若有侵犯，立即删文！在网站文件中找到隐藏的免费api。传入api所需要的参数并对其发出请求。在返回的json结果里找到相应的翻译结果。进入百度翻译，随便输入一段需要翻译的

染血白衣 2020-11-16

net core webapi多版本控制与swagger（nswag）配置教程

首先希望webapi支持多版本，swagger针对不同的版本可进行交互。这种方式很直观，但如果原有项目没有使用多版本控制不建议用，可采用header的方式更为合理一些，增加多个 [ApiVersion]即可。但是两个相同的版本中Controller不能有相

SAMXIE 2020-11-04

4个下一个JavaScript项目的有趣API

术语API是首字母缩写词，代表“应用程序编程接口”。同样，一个API也列出了一堆开发者可以使用的操作，以及对这些操作的描述。API使开发人员可以利用平台的实现来执行一些有用的任务，从而节省时间。这也有助于减少开发人员需要为其程序编写的代码行数，因为API使

一个智障 2020-11-15

前端api请求缓存方案

在开发 web 应用程序时，性能都是必不可少的话题。对于webpack打包的单页面应用程序而言，我们可以采用很多方式来对性能进行优化，比方说 tree-shaking、模块懒加载、利用 extrens 网络cdn 加速这些常规的优化。而事实上，缓存一定是提

学习web前端 2020-11-09

Spring API 的 CORS 测试

在开发 API 和前端的时候，最麻烦的就是一个 CORS 测试。你不知道你的 API 是否允许 CORS，也不知道是不是因为前端的原因。但是 CORS 这个跨域访问确实让人非常头疼。## 写个页面为了解决这个问题，我们用 HTML 写了个页面，这个页面可以

yiranpiaoluo 2020-11-04

看看人家那后端API接口写得，那叫一个优雅！

在移动互联网，分布式、微服务盛行的今天，现在项目绝大部分都采用的微服务框架，前后端分离方式，。前端和后端进行交互，前端按照约定请求URL路径，并传入相关参数，后端服务器接收请求，进行业务处理，返回数据给前端。这样虽然能够照常满足业务，但状态码太凌乱了。这样

lxhuang 2020-11-03

WebAssembly及其 API 的完整介绍

自从引入计算机以来，本地应用程序的性能有了巨大的提高。相比之下，web 应用程序相当慢，因为 JS 一开始并不是为了速度而构建的。但是由于浏览器之间的激烈竞争以及JS 引擎如V8的快速开发，使得 JS 能够在机器上快速运行。但是它仍然不能超过本机应用程

88274956 2020-11-03

Postman API 获得文件如何保存

我们会使用 Postman 测试 API 的测试功能。如果我们直接使用 Postman 发送数据到 API ，API 会返回二进制的数据，然后 Postman 会尝试打开，很不幸的是，你将会看到下面的内容。有 2 个办法可以解决这个问题。一个是在发送的时候

82387067 2020-11-03

使用Node.js原生API写一个Web服务器

Node.js是JavaScript基础上发展起来的语言，所以前端开发者应该天生就会一点。一般我们会用它来做CLI工具或者Web服务器，做Web服务器也有很多成熟的框架，比如Express和Koa。所以本文其实是这两个源码解析的前置知识，可以帮我们更好的理

huangliuyu00 2020-10-29

Facebook：如何在Golang中搭建GraphQL？

本文转载自公众号“读芯术”。多年来，人们一直在使用REST API来满足开发需求，但得完成大量不必要的调用后，开发者才能灵活使用。本文将重点介绍GraphQL的主要功能，以及就API而言它存在的优缺点。文末将展示一个使用Golang的简单程序。Graph

sichenglain 2020-10-27

Java中的微信支付之一：API V3版本签名详解

最近在折腾微信支付，证书还是比较烦人的，所以有必要分享一些经验，减少你在开发微信支付时的踩坑。目前微信支付的 API 已经发展到V3版本，采用了流行的 Restful 风格。今天来分享微信支付的难点——签名，虽然有很多好用的 SDK 但是如果你想深入了解

Dayer 2020-10-27

Postman 测试 API 如何上传文件

很多时候我们都会用 Postman 来测试 API。如何在 Postman 中进行设置来上传文件？Postman 已经帮我们想到了。在进入 Postman 以后，找到你需要进行测试的 API，然后选择 body。其实主要开始很多人不知道怎么设置的原因是，你

小马的学习笔记 2020-10-23

「机器学习架构」一个真实世界机器学习系统的架构

在「机器学习」机器学习开发平台概述，我概述了ML开发平台，它们的工作是帮助创建和打包ML模型。模型构建只是ML系统所需的众多功能中的一项。在这篇文章的最后，我提到了其他类型的ML平台以及构建现实世界ML系统时的限制。在我们能够讨论这些之前，我们需要回顾这些

liuweiITlove 2020-10-14

服务网格和API网关在微服务架构中的作用

如果您从事微服务，那么您可能已经多次听说过这两个术语。人们常常在两者之间感到困惑。在本文中，我将详细讨论服务网格和API网关，并讨论何时使用。在深入研究服务网格和API网关之前，让我们重新访问网络层。API网关充当进入集群，数据中心或一组分布式服务的单个入

kjyiyi 2020-10-10

码农编写代码的方式即将改变，快加入等待列表吧

OpenAI API即将彻底改变编码。好吧，这很容易; 它应该是pwd。如果要导航到/ tmp文件夹怎么办?现在，您最想知道的是，用于计算当前文件夹中python文件数量的命令是什么?类型的f -name'* .py'| wc -l。这并不难，也可以通过其

fanjunjaden 2020-10-09

GraphQL初体验，Node.js构建GraphQL API指南

在过去的几年中，GraphQL[1]已经成为一种非常流行的API规范，该规范专注于使客户端的数据获取更加容易。但是，在GraphQL中，客户端可以精确地确定其从服务器获取的数据。与任何技术决策一样，了解GraphQL为你的项目提供了哪些优势是很重要的，而不

zhyue 2020-09-28

Webhooks与API的区别在哪里？

Webhooks起初看起来像是API，但它们略有不同。它们之间的主要区别在于，webhooks不需要发出请求即可获得响应，而API则需要发送请求才能获得响应。使用Webhooks可以接收，而API需要您检索。正确设置了Webhook之后，无论何时更新Git

huangliuyu00 2020-09-24

微软获GPT-3独家授权，可访问底层代码，API用户继续使用

微软今天宣布，获得OpenAI GPT-3的独家授权。毕竟也是投资10亿美元的金主爸爸，这个结果并不意外。虽然目前尚不清楚具体授权许可内容，但声明中说了，这项协议将允许微软其技术为自身客户开放和提供更优的AI解决方案。微软CTO、兼执行副总裁Kevin S

88397813 2020-09-23
ChinaHuanyang

ChinaHuanyang

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号