el-tree的使用：项目：接口给到的数据是嵌套children的，另外接口中的choose字段表示是否被选中，choose:true需要时选中状态；
菜单权限
接口的数据是树结构：嵌套children
{code: '2000', msg: '操作成功',…}
code: '2000'
data: [{id: 24, label: '项目管理', choose: false}, {id: 1, label: '系统管理', choose: false,…}]
0: {id: 24, label: '项目管理', choose: false}
1: {id: 1, label: '系统管理', choose: false,…}
children: [{id: 3, label: '菜单管理', choose: false}, {id: 4, label: '用户管理', choose: true},…]
choose: false
id: 1
label: '系统管理'
msg: '操作成功'
处理接口数据
methods: {
// 树结构列表
async getTreeSelect() {
const res = await this.$API.system.menu.treeSelect.post({roleId: this.form.roleId});
this.menuList = res.data; // 接口树结构的数据
this.menuChoose = []; //树结构中选中的项
this.getMenuChoose(res.data)
},
// 递归
getMenuChoose(children){
for(let item of children){
if(item.choose){ // item.choose == true表示被选中
this.menuChoose.push(item.id);
}
if(item.children){
this.getMenuChoose(item.children)
}
}
},
//点击选中的项
menuTreeCheck(citem, status) {
//citem当前点击的项， status勾选节点数据的数组
const flag = new Set(status.checkedKeys).has(citem.id); //布尔值
const self = this;
const changeCheck = function (cld) {
cld.forEach((i) => {
self.$refs.menutree.setChecked(i.id, flag); //setChecked（true）表示选中
if (i.children) {
changeCheck(i.children);
}
});
};
if (citem.children) {
changeCheck(citem.children);
}
},
}
文章为作者独立观点，不代表股票自动交易程序化数据接口观点
相关文章
股民评论