同一个el-tree 传入数据不一样 只显示父级节点 子级节点不显示?

树节点<template>
<div class="dialog-box custom-form-box">

<!-- 添加数据字典 -->
<el-dialog
    :title="header.name"
    :visible.sync="visibleDialog"
    :close-on-click-modal="false"
    lock-scroll
    width="1150px"
    class="record-item-dialog"
    :before-close="cancel"
    v-dialogDrag
    append-to-body
>
  <el-form
    class="form"
    :model="form"
    ref="form"
    size="small"
    label-position="right"
    label-width="100px">
    <el-form-item label="类型" prop="nodeType">
      <el-select v-model="form.nodeType" placeholder="请选择">
        <el-option
            v-for="item in nodeTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            disabled
          >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="节点" prop="nodeId">
      <el-card class="card-box-height">![树节点](/img/bVc0RCQ)
        <tree-view
            :tree-data="treeData.data"
            :showCheckbox="treeData.showCheckbox"
            :treeLazy="treeData.treeLazy"
            :treeType="treeType"
            :defaultProps="treeData.defaultProps"
            :isfilterText="treeData.isfilterText"
            :checkStrictly="treeData.checkStrictly"
            :highlight-current="true"
            :checked-keys="checkedKey"
            @check-change="handleCheckChange"
            @node-click="handNodeClick"
            node-key="id"
            default-expand-all
            ref="userTreeView"
        ></tree-view>
        <!-- {{ typeof treeType }} -->
      </el-card>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button size="small" @click="cancel()">取 消</el-button>
    <el-button type="primary" :loading="saveLoading" size="small" @click="addSubmit('form')">提交</el-button>
  </div>
</el-dialog>

</div>
</template>

<script>
import TreeView from '@/components/TreeView';
import * as commonService from 'api/common';
import * as roleService from 'api/usr/role';

export default {
name: 'showUserInfo',
props: {

visible: {
  type: Boolean,
  default: false
},
header: {
  type: Object,
  default: () => {
  }
},
saveLoading: {
  type: Boolean,
  default: false
},
formValue: { // 编辑默认参数
  type: Object,
  default: () => {
  }
},
checkedKey: {
  type: Array,
  default: () => []
},
treeType: {
  type: String,
  default: () => []
}

},
components: { TreeView },
data () {

return {
  form: {
    id: '',
    nodeType: ''
  },
  nodeId: '',
  nodeTypes: [
    { value: 1, label: '指定人' },
    { value: 2, label: '部门' },
    { value: 3, label: '角色' }
  ],
  treeData: {
    data: [],
    defaultProps: {
      children: 'children',
      label: 'deptName',
      isLeaf: (data, node) => {
        if (node.level === 2) {
          return true;
        }
      }
    },
    // treeType: 1,
    treeLazy: false,
    showCheckbox: true,
    isfilterText: true,
    checkStrictly: true
  },
  checkedNodes: ''
};

},
computed: {

visibleDialog: {
  get () {
    return this.visible;
  },
  set (val) {
    this.$emit('cancel', val);
  }
}

},
created () {
},
watch: {

'form.nodeType': {
  handler () {
    // 接口联动
    this.getInfo(this.form.nodeType);
  }
},
formValue: {
  handler (val) {
    if (val.nodeType != null && undefined !== val.nodeType) {
      this.form.nodeType = val.nodeType;
      this.getInfo(this.form.nodeType);
    }
    if (val != null && val.id !== undefined && val.id != null) {
      // 编辑赋值
      this.form = {
        ...val
      };
    }
  }
},
parentData: {
  handler (val) {
    // 编辑赋值
    this.form.parentId = val.parentId;
  }
}

},
mounted () {

// 初始化下拉框的数据
this.initDicData();

},
methods: {

// 初始化下拉框数据
initDicData () {},
// 取消
cancel () {
  this.$confirm('系统不会保留您的操作,确定要关闭吗?').then(() => {
    this.$emit('cancel', false);
  }).catch(() => {});
},
// 提交
addSubmit (formName) {
  const param = {
    ...this.form
  };
  this.checkedNodes = this.$refs.userTreeView.getTreeSelectedNode();
  const checkedNode = { deptName: null, id: null };
  const nameList = [];
  const idList = [];
  this.checkedNodes.forEach(node => {
    nameList.push(node.deptName);
    if (node.deptId) {
      idList.push(node.deptId);
    } else if (node.deptId) {
      idList.push(node.deptId);
    } else if (node.id) {
      idList.push(node.id);
    }
  });
  checkedNode.deptName = nameList.join(',');
  checkedNode.id = idList.join(',');
  param.checkedNode = checkedNode;
  this.checkedNodes = checkedNode;

  this.$emit('dialogSave', param);
},
formData (param) {
  param.verifyFlag = param.leafFlag === '1' ? 1 : 0;
},
// #region --------- 上传组件方法
// 上传前的调用
beforeUploadHandle () {},
uploadChangeHandle (file, fileList) {
  // 当多余一个的时候替换文件
  if (fileList.length > 1) {
    fileList.splice(0, 1);
  }
},
handleCheckChange (data, check) {},
handNodeClick (item, node, self) {},
async getInfo (type) {
  if (type === 1) {
    commonService.getAllUser({ appId: window.g.app_id }).then(res => {
      if (res && res.length) {
        res.forEach(item => {
          item.deptName = item.nameCn;
        });
        this.treeData.data = res;
        // console.log(' this.userListptions  =====', res);
      }
    });
  } else if (type === 2) {
    commonService.getAllOrg({ appId: window.g.app_id }).then(res => {
      if (res && res.length) {
        console.log('org', res);
        res.forEach(item => {
          item.deptName = item.orgName;
        });
        this.treeData.data = res;
      }
    });
  } else if (type === 3) {
    const res = await roleService.getRoleTree(window.g.app_id, 1);
    if (res) {
      // console.log('role', res);
      res.forEach(item => {
        item.deptName = item.name;
        item.childs = item.roles;
      });
      this.treeData.data = res;
      console.log(this.treeData.data); //这里有子节点childs
      // this.$refs.userTreeView.redraw();
      // console.log('3', this.treeData.data);
    };
  }
}

}
};
</script>

阅读 2.1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题