热门搜索 :
宠物故事
您的当前位置:首页正文

关于vue树形结构获取键值的方法

2023-11-29 来源:微宠网
这篇文章主要介绍了vue树形结构获取键值的方法示例,内容挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了vue树形结构获取键值的方法示例,分享给大家,具体如下:

把键值文件放入

引入控件

点击搜索,打开弹窗

<el-form-item label="机构名称" placeholder="请选择机构" prop="orgName"> <el-input readonly type="text" v-model="form.orgName"> <el-button slot="append" icon="el-icon-search" @click="openDepartDialog()"></el-button> </el-input></el-form-item>

打开控件事件,关闭控件事件

openDepartDialog() { this.dialogDepartVisible = true},closeDepartDialog(depart) { console.log(depart) this.form.orgName = depart.label this.form.code = depart.id this.form.departId = depart.id this.dialogDepartVisible = false},

关闭弹窗按钮

<el-dialog title="选择机构" width="30%" :visible.sync="dialogDepartVisible"> <depart-selector @closeDepartDialog="closeDepartDialog" ref="departSelector"></depart-selector> <span slot="footer" class="dialog-footer"> <el-button class="filter-item" style="margin-left: 10px;" @click="handlerAddDepart" type="primary" icon="edit">添加</el-button> </span></el-dialog>

小编还为您整理了以下内容,可能对您也有帮助:

vue怎样获取数组对象中的一个键值对

一、一个数组对象如下

二、我想要的数据只有name:xx,这一项

在vue里面使用递归得到树形的最底层值

1.  // 递归

    formatTree(data) {

      for (let i in data) {

        // if (data[i].children === null) continue

        if (data[i].children.length === 0) {

          // 证明是最后一级,取值

          this.dynamicTags.push(data[i].label)

        } else {

          // 证明不是最后一级,继续找

          this.formatTree(data[i].children)

        }

      }

    }

2. this.formatTree(val)

vue封装树形组件

最近在做一个vue的项目,封装树形组件。

先说一下项目需求:

1.项目原型:

此树形结构分为:根节点,一级节点,二级节点,每个节点都可以选中或取消选中,父级节点选中,下级的所有节点也可全部选中。二级节点中有不可选中的节点

2.后台返回的数据结构:

this.menuList = [{id:1,menuName:'首页',type:1,parentId:0},

{id:2,menuName:'首页1',type:0,parentId:1},

{id:3,menuName:'首页2',type:0,parentId:1},

{id:5,menuName:'首页3',type:1,parentId:1},

{id:6,menuName:'报告看板',type:1,parentId:0},

{id:7,menuName:'看板1',type:2,parentId:6},

{id:8,menuName:'看板2',type:2,parentId:6},

{id:9,menuName:'数据中心',type:1,parentId:0},

{id:10,menuName:'数据中心1',type:1,parentId:9},

{id:10,menuName:'数据中心2',type:2,parentId:9}];

其中parentId为0 的为父节点,1为可以选择的子节点,2为已经选中的子节点

根节点为前端写死的节点

3.html页面

4.最终实现的效果

第二节:Vue实例化

1.创建一个Vue实例

通过vue函数创建一个新的vue实例

一个 Vue 应用由一个通过new Vue创建的 根 Vue 实例 ,以及可嵌套的、可复用的组件树组成的。

我们先看看Vue基本的使用,至于组件我们后面详细的在来探讨

<divid="app"><!-- {{ 插值表达式,可以赋值 取值 三元 }} -->{{ msg }}</div><scriptsrc="./node_moles\vue\dist\vue.js"></script><script>// 引入vue后 会白给你一个Vue构造函数letvm=newVue({// 配置对象el:'#app',// 告诉vue能管理那个部分,使用的是querySelectordata:{// data中的数据会被vm所代理msg:'hello world',// 可以通过vm.msg取到对应的内容 ,也可以赋值      }})</script>

2.声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

2.1. 关于{{}} 插值表达式

插值表达式,表达式,赋值运算,计算,三元表达式,但是尽量少在这里写逻辑计算

插值:

<!-- HTML ---><divid="app">{{ message }}</div><!-- JS ---><script>newVue({el:'#app',data:{messgae:'hello Vue!'}})</script>

我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?

如果需要确定现在的数据是否已经和DOM建立了关联,形成响应式.

可以将js中的new Vue复制给一个全局变量vm.此时vm就是Vue实例化对象,未来可能会用它来搞很多事情,但是最常用到它的时候,是通过this关键字来使用它

varvm=newVue({el:'#app',data:{messgae:'hello Vue!'}})

然后在浏览器的js控制台中修改vm.message值,同时页面也会发生改变

在控制台中输入

vm.messge="你好,Vue"

2.2.使用 JavaScript 表达式

迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<divv-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。

示例:

<divid="app"><!-- 数字操作 --><p>{{ number + 2 }}</p><!-- 三目运算 --><p>{{ ok ? 'YES' : 'NO' }}</p><!-- 字符串翻转 --><p>{{ message.split('').reverse().join('')  }}</p></div><script>constvm=newVue({el:"#app",data:{message:'Hello World',number:10,ok:true,}})</script>

显示结果:

1.png

但是有个就是,每个绑定双大括号(Mustache语法)里面都只能包含 单个表达式

2.3. 关于data数据

vue关注的是数据变化,不需要在像以前一样关注DOM的变化

比如我想在2秒之后让页面发生变化,我们只需要在2秒后更改数据就可以了

varvm=newVue({el:'#app',data:{msg:'hello world'}})setTimeout(function(){vm.$data.msg="bye world"},2000)

关于实例介绍:

示例中vm是Vue的实例对象,

实例对象上有$data属性,其值就是选项对象中data属性值

选项对象就是在实例化Vue时传入的对象

data属性值是一个对象,因此$data也就是这个对象

当通过$data修改msg的值时,也就等于改data中的值, 对应是引用类型

因此示例的结果就是:

2秒后data数据中msg的值改变了, 又因为Vue是始终在关注着msg这个数据,一旦数据发生变化,就会触发Vue的响应式, 继而改变视图显示

2.4 再次理解MVVM模式

在上一节讲Vue的mvvm模式的时候就有提到,

Vue实例对象就是vm,data数据就是model,  页面显示的结果就是view

再来看一下mvvm的图

mvvm.jpg

这张图在配合刚才的示例, 我们就能很好的理解,当数据Model发生变化以后, Vue就可以通过Data Bindings了解到,然后使用新的数据去改变页面显示

至于Vue如何通过DOM Listeners监听页面的改变,来改变数据,这个我们之后讲到在说

3.实例上的方法

除了数据属性,Vue 选项对象中还暴露了一些有用的属性与方法。在通过实例对象使用选项对象的属性时,属性前面都需要带上前缀$,以便与用户定义的属性区分开来。例如:

vardata={a:1}varvm=newVue({el:'#example',data:data})vm.$data===data// => truevm.$el===document.getElementById('example')// => true

3.1. 实例上常用的属性和方法

vm.$attrs// 用户获取父组件传递给子组件的属性,(除props,class,style外)vm.$data// vm 上的数据vm.$watch// 监听vm.$el// 当前el元素vm.$set// 后加的属性实现响应式vm.$options// vm 配置 上的 所有属性vm.$nextTick(()=>{})// 异步方法,等待渲染dom完成后来获取vmvm.$refs// 获取dom元素或者组件实例的引用

其实我们可以创建一个Vue实例,然后在控制台上打印这个实例对象,你会看到很多的属性和方法

constvm=newVue({el:"#app",})

在控制台输入vm

显示结果:

实例属性.png

这里面很多属性,我们暂时不用去关心他,因为随着学习的深入,慢慢都会学习到的.

4.实例化多个vue

我们可以在页面上同时实例化多个Vue, 不同的实例接管页面上不同的区域.

看下如下的示例:

##  <h1>实例化多个Vue对象</h1><divid="app-one"><h2>{{ title }}</h2><p>{{ greet }}</p></div><divid="app-two"><h2>{{ title }}</h2><p>{{ greet }}</p><buttonv-on:click="changeTitle">点击改变app-one的h2的内容</button></div><script>//  Vue实例varone=newVue({el:'#app-one',data:{title:" vue-app-one的内容"},computed:{greet:function(){return"Hello App One"}}})//  Vue实例vartwo=newVue({el:'#app-two',data:{title:" vue-app-two的内容"},methods:{changeTitle:function(){one.title="app-one的内容发生改变了"}},computed:{greet:function(){return"Hello App two"}}})</script>

Vue事件和方法还没有讲到, 先做一个了解即可:

示例分析:

两个实例one和two接管了不同的DOM元素,

点击按钮是在two实例接管的DOM元素中,

所以,当你点击时,只会触发two实例中的方法, 也只会改变two实例中的数据

那么问题来了?

能否在two实例中修改one实例中的数据呢,?

答案当然是可以的啦, 因为变量one是全局变量,

在two实例化中,就可以通过one变量得到第一个Vue实例化对象,

然后就可以通过实例化对象修改数据,这个可以自己尝试写写.

5. Vue 操作DOM元素

虽然Vue是数据驱动的,但是有的时候我们就需要自己手动的获取到DOM元素,对DOM元素进行操作,那么该如何处理呢,

操作DOM元素:

在需要操作的DOM元素中使用ref属性,

ref属性的值是自己随便定义的名字

通过Vue实例的$refs属性获取操作dom元素

<divid="app"><divref="wuwei">无为</div></div><script>varvm=newVue({// 根实例el:'#app',data:{},mounted(){//dom元素中有多个一样的ref,dom如果不是通过v-for循环出来的,只能获取一个// 如果是循环出来的,可以获取多个,获取的是一个数组console.log(this.$refs.wuwei)}});</script>

关于示例中$refs属性的解释:

因为可以在多个DOM元素上使用ref.

所以$refs属性获取的是所有具有ref属性的DOM元素的集.

因此要想操作确定的DOM元素就需要在通过当初的ref值获取.

简而言之: 就是ref在dom元素上通过this.$refs.自定义名字是获取dom元素

当获取到DOM元素后,然后就可以采用原生的JavaScript对DOM进行操作

注意:

Vue 接管的DOM元素之外的元素使用ref是获取不了的,值是undefined

微宠网还为您提供以下相关内容希望对您有帮助:

vue怎样获取数组对象中的一个键值对

一、一个数组对象如下 二、我想要的数据只有name:xx,这一项

VUE求助关于渲染键值对

DataTable dt = new DataTable();dt.Columns.Add(new DataColumn("PreRevDate0", typeof(decimal)));DataColumn col = new DataColumn();col.ColumnName = "PreRevDate1";col.Expression = "ABS(Convert.ToInt32(Pr...

vueelement树形可以存在多个同id一起选中吗

vueelement树形可以存在多个同id一起选中。根据查询相关资料信息,使用element-tree实现id相同的选择最近做一个项目,需要树形结构中id相同的数据,选中或取消一个,其他的也要选中和取消。

vue页面DOM操作失效如何处理

解决方法:使用Vue.nextTick,看下官方材料:‘在下次 DOM 更新循环结束之后执行延迟回调',这句话不是特别理解,不过可以看出DOM更新是一个循环的过程,在过程结束之前无法获取到真实的DOM元素(至于这个循环是多久,还在探索中...

Vue.js怎样把递归组件构建为树形菜单

与所有树结构一样,它必须有一个根节点,但可以无限深。let tree = { label: 'root', nodes: [ { label: 'item1', nodes: [ { label: 'item1.1' }, { label: 'item1.2', nodes: [ { label: '...

vuedata命名对象要枚举每个键值

不要。Vue是一套用于构建用户界面的渐进式JavaScript框架,其中data命名对象不要枚举每个键值,只需要定义一个键值即可,例如数组、对象、对象数组,使用遍历成数据集。

怎样从对象中获取键值并保存在对象中

从对象中获取键值并保存在对象中方法是使用objkeys。对象键值的获取方法objkeys工作中经常会专门去取对象的键和值去push进一个新数组中,它可以从对象中获取键值并保存在对象中。

vue.js Map 数据结构

1.Map 数据结构,类似于对象,键值对的集合, 所有的数据都是唯一的,不会重复,每条数据都需要放在一个数组中,它本身就是一个构造函数 size 数据的长度 set() 添加一个数据 delete() 删除一条数据 get () 获取一条...

vue基础题

第一种:挂载到Vue的prototype上。把全局方法写到一个文件里面,然后for循环挂载到Vue的prototype上,缺点是调用这个方法的时候没有提示 第二种:利用全局混入mixin,因为mixin里面的methods会和创建的每个单文件组件合并。这样做...

Vue中 get post 请求方法

2.3. 通过FormData表单形式传递参数(通过键值对的表单形式传递数据)       formData:{             ...

Top