vue 中el-tree用法： 设置数据与获取数据回显数据

<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();
        }
      })
    },
  }
}