循序渐进VUE+Element 前端应用开发(26）--- 各种界面组件的使用（2）

// treeAddIcon(jsonTree, label);// 循环遍历给tree加图标

return jsonTree;

}

这样树列表的绑定操作如下代码所示。

getTree() { // 树列表数据获取

var param = {

SkipCount: 0,

MaxResultCount: 1000

}

category.GetAll(param).then(data => {

this.treedata = [];// 树列表清空

var list = data.result.items

if (list) {

// console.log(list)

// 使用getJsonTree函数，实现对二维表转换为嵌套树对象集合

var newTreedata = getJsonTree(list, {

id: ‘id’,

pid: ‘pid’,

children: ‘children’,

label: ‘categoryName’

});

// console.log(newTreedata)

this.treedata = newTreedata

}

});

},

顺便说一下，由于引入一些原始控件需要实现很多相应的操作，一般情况下，我们可以把树控件常规的处理封装成一个组件的方式使用，其中包括了常规的过滤、选中等操作处理。如下是我们简单封装的树控件的自定义组件，用于处理常规的树列表信息。

这样使用起来，界面代码减少很多，只需要实现对应的事件即可。

<myTree :data=“treedata” :default-expand-all=“false” icon-class=“el-icon-price-tag” @nodeClick=“nodeClick” />

另外，更高维度上，我们还可以把业务界面按模块分离出来，实现不同的界面的组装，这样可以减轻代码的臃肿程度，提高代码可读性。

如之前说过的机构信息，页面逻辑比较多，可以简化为各个不同的模块，然后拼装组件即可。

例如：对于权限系统中的每个角色，除了包含基本信息外，还会包含拥有的权限（功能控制点）、包含用户，以及拥有的菜单，其中权限是用来控制界面元素，如操作按钮的显示的，而拥有的菜单，则是用户以指定账号登录系统后，获得对应角色的菜单，然后构建对应的访问入口的。角色界面模块UML类图如下所示。

那么对应界面元素上，我们就应该以不同的Tab来展示这些信息，每个Tab内容部分就可以作为一个独立的界面组件来开发。

8、按钮及按钮组

====================================================================

按钮比较常用，一般我们依照常规的方式使用，并设置样式即可。

代码如下所示:

默认按钮

主要按钮

成功按钮

信息按钮

警告按钮

危险按钮

朴素按钮

主要按钮

成功按钮

信息按钮

警告按钮

危险按钮

圆角按钮

主要按钮</