先上需要实现的效果图:
左侧是一个树形菜单,右侧为一个表格。
初次写树形菜单,用了很久很久……
图1
//html部分
//注意:ngs组件是公司封装好的,可以在element等网站找找组件
<ngs-border-layout>
<!-- 左侧树形菜单 -->
<ngs-border-layout-panel region="west" :size="300" :min-size="200">
<div class="pm-roles-west ngs-panel">
//el-tree用的element组件
<el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small">
</el-input>
/*
:data--将接收到的正确数据渲染到页面
default-expand-all--是否默认展开所有节点
highlight-current--是否高亮当前选中节点
:props="defaultProps"--配置选项,应该也可以不定义,有默认的
:filter-node-method="filterNode"--对树节点进行筛选时执行的方法
@node-click="handleNodeClick"--节点点击事件
*/
<el-tree class="filter-tree" ref="tree" :data="treeData" default-expand-all highlight-current
:props="defaultProps" node-key="id" :expand-on-click-node="false" :filter-node-method="filterNode"
@node-click="handleNodeClick">
</el-tree>
</div>
</ngs-border-layout-panel>
//js部分
export default {
data() {
return {
//el-tree树形菜单
filterText: '',
treeData: [ //接受正确数据交给页面展示,格式为 data:[{pId,pName,children:[{sId1,sName1},{sId2,sName2},{}...]}]
{
//父节点:正常是从后端数据获取,因为此案例只有一个父节点,所以图简单写固定死了
id: 'root',
label: '监督指导类别',
//子节点:
children: []
}
],
defaultProps: {
children: 'children',
label: 'label'
},
created() {
this.getTreesMenu();//页面刚进来就先加载这个方法函数
},
watch: {
//过滤与filterNode搭配
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods: {
//获取树形菜单
getTreesMenu() {
api.getTreesInfo((result) => {
// console.log(result);
var jsonObjs = JSON.parse(result);//JSON.parse() 方法用于将后台返回的 JSON 字符串转换为对象。
let newList = [];//定义一个新数组用来存放遍历的数据
for (let i = 0; i < jsonObjs.datas.length; i++) {//datas是根据后端返回的数据来的(图2)
//为了将一个完整对象传入到children这个数组
//一开始我拼接成了字符串,怎么都放不进去,后面请教了下面这种格式
newList[i] = { id: jsonObjs.datas[i].LVL_ID, label: jsonObjs.datas[i].NAME };
//LVL_ID是节点的id值,NAME是节点的名称,注意后端返回的数据这个区分大小写
//从返回的数据遍历出来就是{id:"001",label:"人大"}放入数组第一个位置,...循环放
}
//最终把遍历出来完整的对象放到data数组的第一处也就是此案例唯一的父节点下面的children位置
this.treeData[0].children = newList;
})
},
//过滤
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
}
图2
完结撒花~