后端返回的数据唯一key值是orgId,通过props属性把id和orgId以及label和orgName对应上了,此时node-key绑定的是id,而是orgId

<Tree
        ref="tree"
        :props="{id: 'orgId', label: 'orgName'}"
        :data="groupList"
        :filter-node-method="nodeFilter"
        :current-node-key="userGroupId"
        node-key="orgId"
        show-checkbox
        highlight-current
        default-expand-all
        check-strictly
        @node-click="handleNodeClick"
        @check-change="handleCheckChange">
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span>{{ node.label }}</span>
          <i v-if="node.checked" class="el-icon-edit" @click="editUserGroup(data, node)" />
          <i v-if="node.checked" class="el-icon-delete" @click="deleteOrg(data)"></i>
        </span>
      </Tree>

groupList是通过父组件创过来,所以需要监听groupList的变化后重新渲染key,通过setCurrentKey设置高亮时需要等DOM 更新循环结束之后执行延迟回调,否则直接使用this.$refs.tree.setCurrentKey,是拿不到方法的,报错

  watch: {
    groupList(val) {
      console.log(val);
      if (Array.isArray(val) && val.length > 0) {
        const userGroupId = this.userGroupId;
        if (userGroupId) {
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(userGroupId);
          });
        }
      }
    }
  },
GitHub 加速计划 / eleme / element
14
2
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐