vue-element 权限管理数据的处理，简单实用。

1,首先获取到后端返回给我们的权限数据,数据大概长这么个样子。

2,要渲染到element的树形结构上的话，要做一层递归处理，让它形成树形结构。这个也可以不用递归，我看他们用map这个属性，也能很好的处理。具体做法如下：

这个数据渲染好以后，是长这样的，也就符合了我们el-tree组件所需的数据结构。

3，现在管理员开始在管理界面开始做权限管理 *** 作。如图所示：

这样的话返回给后端的是一个id组成的数组， data=[1,4,10] 这就是你返回给后端的数据 ，还没完接下来该复现了。

4,现在后端给数据返回给你，他是按照刚才你给的数据返回过来的。然后添加上check属性，这个也是你们约定，数据大概就长这样：

你可能还在想不错，不错。还不用递归，循环就给数据拿了。当你拿到所有的数组check为true的数据组成的数组treelist,然后 this$refstreesetCheckedKeys(thistreelist) 上去时，已经不符合要求了，因为父集全选，子集就会全选。他会变成这样：

5，这样肯定不行，我们要再做一次数据处理，让它符合要求。1， 要给数据再次递归成树形结构 ，还是上面的方法给数据递归成树形结构。2，遍历这个树形结构，判断父集的子集是否全部为true，如果不是就就让他的check属性设置为false，

这里说明一下。thisstate 这个变量你要自己设置一下或者全局变量都行，反正要设置一下，设置为true。首先我们给递归好的树形结构放在 traveData 这个函数里面这个函数会递归一遍我们的数据，主要是判断

itemcheck = itemchildrenlength > 0 thisgetchildStatus(itemchildren) : itemcheck

这里是判断他有没有子集，没有的话就是ok，那么check的值就是合理的，如果他有子集但是它的check为true这就很不合理，因为我们不知道他的子集到底是不是都是选了的，也就是check为true，所以要做一层碰断，判断他的子集是否全为true，只要他的子集有一个不为true，那它就不能为true thisgetchildStatus(itemchildren) 所以这里又做了一层，遍历他的所有子集。判断check的值。ok做到这里我们大概也差不多了。拿到 return data 的值我们还要做一次数据的递归，

6,至此，我们已经拿到了 thistreelist的值我们只要

这样就可以把我们的树形结构又从新渲染好了。数据用的都是模拟数据，但是和业务场景的数据其实差别不大，只要按照这个流程就ok了。不管是element，antd，我觉得这个全选和半选感觉还可以优化下。不是真的挺绕的。

获取cn里的数据的，可以用：

responsedatacn

但是需求是根据选择来获取数据的，会发生变化，最开始的想法是，用一个变量来记录需要获取的key:

假设need是需要获取的某个key

const dkey = thisneed;

responsedatadkey

这个

这样发现获取不到数据，这是因为vuejs把dkey当成data里的某一个key了，类似于上面的"cn"。

折腾了很久才突然想起，这个data其实类似一个数组，我们可以像使用数组一样使用它，后面发现的确是可行的

const dkey = thisneed;

responsedata[dkey]

如果有说得不对或者有更好的方法，希望大家指教。

axiosget('/static/testjson')then(res => {

// 使用ajax请求数据获取到users（数组）,所以thisusers是数组

thisusers= resdatauser

})

}

如果你想获取每个user的start可以使用for循环,当然在vue模板渲染里使用的是v-for例如:

<li v-for="user in users">satrt:<span>{{userstart}}</span></li>

如果只是想在js里面单独获取某个user的start可以直接在数组中取一下，例如

// 获取第一个用户的start

var start1 = thisusers[0]start

// 获取第二个用户的address

var address2 = thisusers[1]address

把一个普通 JavaScript 对象传给 Vue 实例的 data 选项， Vue 将遍历此对象所有的属性 ，并使用 ObjectdefineProperty 把这些属性全部转为 getter/setter 。ObjectdefineProperty 是仅 ES5 支持，且无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。

受到现代JavaScript浏览器的限制，其实主要是 Objectobserve() 方法支持的不好， Vue不能检测到对象的添加或者删除。然而Vue在初始化实例时就对属性执行了setter/getter转化过程，所以属性必须开始就在对象上，这样才能让Vue转化它。

如push、splice、=赋值（array=[1,2,3]）

使用下标修改某个元素（这种比较常见）

1push到数组的时候深拷贝一下

JSONparse(JSONstringify(thiswidget))

2给 thiswidget 添加属性的时候使用 $set 添加，将响应属性添加到对象上

this$set(thiswidget, itemattr,'');

3objectassign()+直接=赋值

方法/步骤

新建一个html代码页面，然后创建一个<div>，然后给这个<div>设置id为app

引入vuejs文件。引入已经下载好的vuejs文件。

创建vue实例。在引入的vuejs文件后新建一个<script>，然后只用new Vue()创建vue设置挂载点。

代码：

<script>

var app =  new Vue({

el:"#app"

})

</script>

添加数组。在Vue里添加一个items的数组。

代码：

data:{

items:["张三","李四","王五"]

}

创建vue组件，使用v-for把items数组遍历，然后把遍历好的数据转给子组件，子组件通过props获取父组件传递的参数。

html代码：

<todo-item v-for="item in items" :item="item"></todo-item>

vue组件代码：

Vuecomponent("todo-item",{

props:['item'],

template:"<div>{{item}}</div>"

})

保存html文件后使用浏览器打开，即可看到浏览器上打印出items数组数据。

以上就是关于vue-element 权限管理数据的处理，简单实用。全部的内容，包括:vue-element 权限管理数据的处理，简单实用。、vue没有返回值response.data是什么、vue工程里怎么使用axios接收一个json的数组，并使用该数组的某个元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！