vue 中el-tree用法: 设置数据与获取数据回显数据
<template><el-treeref="tree":data="getUserMenuData"show-checkboxnode-key="id":default-expanded-keys="[2, 3]":default-checked-keys="[5]"@node-click="handleNodeClick":props="defaultProps">&l
·
<template>
<el-tree
ref="tree"
:data="getUserMenuData"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
@node-click="handleNodeClick"
:props="defaultProps">
</el-tree>
</template>
mport {addSysUser,getUserMenu,getDetail} from "@/api/EmployeeAccountManagement";
export default {
name: "newlyAddedAccountBox",
components:{
},
data() {
return {
getUserMenuData: [],
defaultProps: {
children: 'children',
label: 'name'
},
/* 列表查询条件 */
dataForm: {
id:0,
realName:'',
userName:'',
status:'0',
phone:'',
password:'',
menuIds:[]
},
}
},
created() {
},
mounted() {
let defalutArr = [1,2,3];
this.$refs.tree.setCheckedKeys(defalutArr);
let userid = JSON.parse(localStorage.getItem("userInfo")).id;
this.getUserMenu(userid);
let uId = this.$route.query.id;
if(uId){
this.getDetail(uId);
}
},
computed: {
},
methods: {
getUserMenu(id){
//设置列表
getUserMenu({userId:id}).then((res)=>{
if(res.status == 200){
this.getUserMenuData = res.data;
}
})
},
getDetail(id){
//反显数据
getDetail({id:id}).then((res)=>{
if(res.status == 200){
let arr = [];
res.data.menus.forEach(value => {
if(value.checked){
if(value.children){
arr = arr.concat(value.children.filter(item => item.checked));
}
if(!value.children){
arr.push(value);
}
}
});
this.$refs.tree.setCheckedNodes(arr);
}
})
},
saveData(){
//选择保存
let res = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
this.dataForm.menuIds = res;
addSysUser(this.dataForm).then((res)=>{
if(res.status == 200){
console.log(res,'新增用户');
this.goBack();
this.$message.success("保存成功!");
this.init();
}
})
},
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)