element tree 单选 默认展开第一层节点

587 阅读1分钟
<template>
  <div>
    <el-button
          type="primary"
          @click="addUserInfo"
        >提交</el-button>
        <el-row class="toolbar" style="width: 20%;height:600px" align="left">
      <div style="max-height: 450px;overflow: auto">
                <el-tree
                  size="small"
                  show-checkbox
                  :default-expanded-keys="defaultExpandedKeys"
                  :data="treeData"
                  node-key="id"
                  :check-strictly="true"
                  :props="props"
                  @check-change="checkChanges"
                  @node-click="nodeClicks"
                  ref="depTreebj"
                ></el-tree>
              </div>
    </el-row>
  </div>
</template>
<script>
export default {
    data() {
      return {
        treeData:[], //后台返回的tree树列表
        defaultExpandedKeys:[], //自己定义的用于接收tree树id的数组
        props: {
          label: "departmentName",
          children: "children"
        },
        checkedId: “”,
       }
    },
     created(){
      this.getEquipmentList()
    },
     methods: {
     // 操作点击事件 type 1 查看 2编辑
      // 查看 编辑
      handleClick(index, type) {
        var self = this;
        if (type == 2) {
          self.editFormVisible = true;
          self.treeData.forEach(e => {
            e.disabled = false;
            e.children.forEach(es => {
              es.disabled = false;
              es.children.forEach(ea => {
                ea.disabled = false;
                ea.children.forEach(eb => {
                  eb.disabled = false;
                })
              });
            });
          });
          api.checkUser({id: index.id}).then(res => {
            if (res.code == "code_200") {
              self.addForm = res.data;
              self.LoginorgCode = res.data.deparmentCode
              if (res.data.userRoleIds == "") {
                self.checkList = [];
              } else {
                self.checkList = res.data.userRoleIds.split(",");
              }
              self.$refs.depTreebj.setCheckedKeys([res.data.departmentId]);
              self.defaultExpandedKeys.push(res.data.departmentId) ;// 这里存放要默认展开的节点 id
            }
          });
        }
      },
     // 新增
      addUserInfo() {
        var self = this;
        self.addForm = {
          // account: "",
          departmentId: "",
          name: "",
          flag: "1",
          phone: "",
          userRoleIds: "",
          isJointUser: 0
        };
        self.checkList = [];
        this.addFormVisible = true;
        self.treeData.forEach((e,index) => {
          e.disabled = false;
          e.children.forEach(es => {
            es.disabled = false;
            es.children.forEach(ea => {
              ea.disabled = false;
              ea.children.forEach(eb => {
                eb.disabled = false;
              })
            });
          });
        });
        self.defaultExpandedKeys.push(self.treeData[0].id)
      },
      // 用来做单选 
     checkChange(data, checked, child) {

        var self = this;
        if(!self.isAddTree){
          if (checked === true) {
            self.checkedId = data.id;
            self.$refs.depTree.setCheckedKeys([data.id]);
            self.LoginorgCode = data.deparmentCode;
          } else {
            if (self.checkedId === data.id) {
              self.$refs.depTree.setCheckedKeys([data.id]);
            }else {
              self.$refs.depTree.setCheckedKeys([self.checkedId]);
            }

          }
        }

      },
      nodeClicks(data, checked, child) {
        var self = this;
        self.checkedId = data.id;
        self.$refs.depTreebj.setCheckedKeys([data.id]);
      }
     }
</script>